swiper在一个页面多个轮播图

标签：between   nat   esper   多个   更改   100%   ble   delay   rev   

<script>
    var swiper = new Swiper(‘.swiper-container1‘, {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        pagination: {
            el: ‘.swiper-pagination1‘,
            clickable: true,
        },
        navigation: {
            nextEl: ‘.swiper-button-next‘,
            prevEl: ‘.swiper-button-prev‘,
        },
    });
</script>

<script>
    var swiper2 = new Swiper(‘.swiper-container2‘, {
        slidesPerView: 4,
        spaceBetween: 30,
        slidesPerGroup: 4,
        loop: true,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
        },
        loopFillGroupWithBlank: true,
        pagination: {
            el: ‘.swiper-pagination2‘,
            clickable: true,
        },
        navigation: {
            nextEl: ‘.swiper-button-next‘,
            prevEl: ‘.swiper-button-prev‘,
        },
    });
</script>

注意： 千万不要直接更改swiper-container 应该在后面加上所起的名称

<div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="img/banner.png" width="100%" 

height="328px"></div>
        <div class="swiper-slide"><img src="img/banner.png" width="100%" 

height="328px"></div>
        <div class="swiper-slide"><img src="img/banner.png" width="100%" 

height="328px"></div>
        <div class="swiper-slide"><img src="img/banner.png" width="100%" 

height="328px"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination swiper-pagination1"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

    <div class="swiper-container swiper-container2">
        <div class="swiper-wrapper">
            <div class="swiper-slide success-item"><img src="img/book3.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            <div class="swiper-slide success-item"><img src="img/book3.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
            <div class="swiper-slide success-item"><img src="img/biaozhi.png"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper-pagination2"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>

swiper在一个页面多个轮播图

标签：between   nat   esper   多个   更改   100%   ble   delay   rev   

原文地址：https://www.cnblogs.com/vientiane/p/9938560.html