Swiper组件（五）--Progress（进度）

watchSlidesProgress

（1）Progress分为swiper的progress 和每个slide单独的progress。开启这个参数来计算每个slide的progress
（2）Swiper的progress无需设置即开启。
（3）progress值和swiper或slide的位置比例相关联，如果每个slide的宽度不同，pregress不一定会呈规则变化。例如：设置了slidesPerView: ‘auto’。

watchSlidesVisibility

开启watchSlidesVisibility选项前需要先开启watchSlidesProgress，如果开启了watchSlidesVisibility，则会在每个可见slide增加一个Class Name，默认为’swiper-slide-visible’。

        .swiper-slide-visible {
            color: #0da;
        }

<div class="swiper-box">
        <div class="swiper-container" id="mySwiper20">
            <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="progress1" style="margin: 10px 0px;">swiper的progress:0</div>
        <div class="progress2">slide1的progress:0</div>
        <div style="display:flex;justify-content:space-between;">
            <div style="background-color:#0aa" class="button" onclick="changeProgress1()">获取swiper的process值</div>
            <div style="background-color:#0aa" class="button" onclick="changeProgress2()">获取slide1的process值</div>
        </div>
    </div>

let mySwiper20 = new Swiper("#mySwiper20", {
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    loop: true,
    watchSlidesProgress: true,
})

function changeProgress1() {
    $(".progress1").text("swiper的progress：" + mySwiper20.progress);
}
function changeProgress2() {
    $(".progress2").text("slide1的progress：" + mySwiper20.slides[0].progress);
}