Swiper组件（四）--Loop（环路）

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关闭此功能。