Swiper 禁用左右半/部分滑动
Swiper disable half / partial slides on left and right
我正在尝试禁用显示在 Swiper 左侧和右侧的部分/半幻灯片。我希望它只显示完整的幻灯片而不显示任何不完整的幻灯片
var swiper = new Swiper(".swiper-container", {
slidesPerView: 'auto',
preventClicksPropagation: false,
loop: true,
slidesPerGroup: 1,
loopPreventsSlide: false,
centeredSlides: true,
centeredSlidesBounds: true,
setWrapperSize: true,
spaceBetween: 20,
// init: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});
这是我的html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card-content">Hello</div>
</div>
</div>
</div>
</div>
这是一个代码示例,可以满足您的需求:
new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 5,
centeredSlides: true,
spaceBetween: 30,
loop: true,
loopedSlides: 7,
watchSlidesVisibility: true,
breakpoints: {
1028: {
slidesPerView:3,
spaceBetween: 30,
},
480: {
slidesPerView:1,
spaceBetween: 10,
}
}
});
html, body {
position: relative;
height: 100%;
}
body {
background: blue;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
padding: 4em 0;
}
.container{
margin: 0 auto;
height: 100%;
padding: 0 4em;
overflow: hidden;
}
.slider-wrap {
overflow: hidden;
height: 100%;
width: 100%;
background: red;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
opacity: 0;
}
.swiper-container {
overflow: visible;
}
.swiper-slide-visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
所有功劳都归功于 Fabian 的代码笔:
https://codepen.io/bitpunk/pen/ZEGmBom
我修改了此代码笔以满足您的需求。
我正在尝试禁用显示在 Swiper 左侧和右侧的部分/半幻灯片。我希望它只显示完整的幻灯片而不显示任何不完整的幻灯片
var swiper = new Swiper(".swiper-container", {
slidesPerView: 'auto',
preventClicksPropagation: false,
loop: true,
slidesPerGroup: 1,
loopPreventsSlide: false,
centeredSlides: true,
centeredSlidesBounds: true,
setWrapperSize: true,
spaceBetween: 20,
// init: false,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
},
});
这是我的html
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="card-content">Hello</div>
</div>
</div>
</div>
</div>
这是一个代码示例,可以满足您的需求:
new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
slidesPerView: 5,
centeredSlides: true,
spaceBetween: 30,
loop: true,
loopedSlides: 7,
watchSlidesVisibility: true,
breakpoints: {
1028: {
slidesPerView:3,
spaceBetween: 30,
},
480: {
slidesPerView:1,
spaceBetween: 10,
}
}
});
html, body {
position: relative;
height: 100%;
}
body {
background: blue;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
padding: 4em 0;
}
.container{
margin: 0 auto;
height: 100%;
padding: 0 4em;
overflow: hidden;
}
.slider-wrap {
overflow: hidden;
height: 100%;
width: 100%;
background: red;
}
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
opacity: 0;
}
.swiper-container {
overflow: visible;
}
.swiper-slide-visible {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css" rel="stylesheet"/>
<div class="container">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
所有功劳都归功于 Fabian 的代码笔: https://codepen.io/bitpunk/pen/ZEGmBom 我修改了此代码笔以满足您的需求。