swiper在一个页面多个轮播图

Posted 大BUG

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了swiper在一个页面多个轮播图相关的知识,希望对你有一定的参考价值。

<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在一个页面多个轮播图的主要内容,如果未能解决你的问题,请参考以下文章

Vue在同一个页面制作多个轮播图

在Vue中使用Swiper轮播图同时解决点击轮播图左右切换按钮不生效的问题同时将轮播图抽离出为一个公共组件

轮播图swiper5第三方插件的使用

react-native构建基本页面1---轮播图+九宫格

小程序--swiper轮播图组件

vue中轮播组件,实现默认显示3张图片,中间显示全部两边显示部分