loop
(1)loop模式:会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换,让Swiper看起来是循环的。
(2)注意:loop模式在与free模式同用时会产生抖动,因为free模式下没有复制slide的时间点。
<div class="swiper-box">
<div class="swiper-container" id="mySwiper16">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #f00;">slide 1</div>
<div class="swiper-slide" style="background-color: #ff0;">slide 2</div>
<div class="swiper-slide" style="background-color: #f0f;">slide 3</div>
<div class="swiper-slide" style="background-color: #fff;">slide 4</div>
<div class="swiper-slide" style="background-color: #00f;">slide 5</div>
<div class="swiper-slide" style="background-color: #0f0;">slide 6</div>
<div class="swiper-slide" style="background-color: #0ff;">slide 7</div>
<div class="swiper-slide" style="background-color: #aaa;">slide 8</div>
<div class="swiper-slide" style="background-color: #0aa;">slide 9</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="buttonNew">Loop:true</div>
</div>
let mySwiper16 = new Swiper("#mySwiper16", {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
})
loopAdditionalSlides
(1)loop模式下会在slides前后复制若干个slide,,前后复制的个数不会大于原总个数。
(2)该属性在效果上看起来没有什么差别,但是在获取slide个数时却有不同
默认为0,前后各复制1个。0,1,2 --> 2,0,1,2,0-------slide:5
例:取值为1,0,1,2 --> 1,2,0,1,2, 0,1-------slide:7
例:取值为2,0,1,2 – 0,1,2,0,1,2, 0,1,2-------slide:9
<div class="swiper-box">
<div class="swiper-container" id="mySwiper17">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #0ff;">slide 1</div>
<div class="swiper-slide" style="background-color: #aaa;">slide 2</div>
<div class="swiper-slide" style="background-color: #0aa;">slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="buttonNew">loopAdditionalSlides:2</div>
<div class="buttonNew">slide个数:9个</div>
</div>
let mySwiper17 = new Swiper("#mySwiper17", {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop: true,
loopAdditionalSlides: 2,
})
loopedSlides
(1)在loop模式下使用slidesPerview:‘auto’,还需使用该参数设置所要用到的loop个数-----最新版的已经没有这个问题,不设置也可以正常使用
(2)一般设置大于等于可视slide个数即可。否则loop失效。
<div class="swiper-box">
<div class="swiper-container" id="mySwiper18">
<div class="swiper-wrapper">
<div class="swiper-slide" style="width:20%;background-color: #f00;">slide 1</div>
<div class="swiper-slide" style="width:20%;background-color: #ff0;">slide 2</div>
<div class="swiper-slide" style="width:20%;background-color: #f0f;">slide 3</div>
<div class="swiper-slide" style="width:20%;background-color: #fff;">slide 4</div>
<div class="swiper-slide" style="width:20%;background-color: #00f;">slide 5</div>
<div class="swiper-slide" style="width:20%;background-color: #0f0;">slide 6</div>
<div class="swiper-slide" style="width:20%;background-color: #0ff;">slide 7</div>
<div class="swiper-slide" style="width:20%;background-color: #aaa;">slide 8</div>
<div class="swiper-slide" style="width:20%;background-color: #0aa;">slide 9</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="buttonNew">loopedSlides:5</div>
</div>
let mySwiper18 = new Swiper("#mySwiper18", {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 'auto',
loop: true,
loopedSlides: 5,
})
loopFillGroupWithBlank
在loop模式下,为group填充空白slide。
<div class="swiper-box">
<div class="swiper-container" id="mySwiper19">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #ff0;">slide 2</div>
<div class="swiper-slide" style="background-color: #f0f;">slide 3</div>
<div class="swiper-slide" style="background-color: #fff;">slide 4</div>
<div class="swiper-slide" style="background-color: #00f;">slide 5</div>
<div class="swiper-slide" style="background-color: #0f0;">slide 6</div>
<div class="swiper-slide" style="background-color: #0ff;">slide 7</div>
<div class="swiper-slide" style="background-color: #aaa;">slide 8</div>
<div class="swiper-slide" style="background-color: #0aa;">slide 9</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div style="margin: 10px 0px;">loopFillGroupWithBlank:true</div>
</div>
let mySwiper19 = new Swiper("#mySwiper19", {
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView: 3,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,
})
loopPreventsSlide
(1)当swiper正在过渡时,阻止slide前进后退的切换操作,此功能仅在loop模式下有效。
(2)可设置为false关闭此功能。