当前页面独立调用双swiper插件

    <!-- banner -->
    <div class="swiper-container swiper-container1"> //添加swiper-container1
        <div class="swiper-wrapper">
            <div class="swiper-slide banner1"></div>
            <div class="swiper-slide banner2"></div>
            <div class="swiper-slide banner3"></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination swiper-pagination1"></div> //添加swiper-pagination1

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-prev1"></div> //添加swiper-button-prev1
        <div class="swiper-button-next swiper-button-next1"></div> //添加swiper-button-next1

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar swiper-scrollbar1"></div> //添加swiper-scrollbar1
    </div>
        <div class="swiper-container server-wrap1200 swiper-container2"> //添加swiper-container2
            <div class="swiper-wrapper">
                <div class="swiper-slide clearfix">
                    <ul class="clearfix">
                        <li>互联网</li>
                        <li>市场商务</li>
                        <li>电子电气</li>
                        <li>人事行政</li>
                        <li>外语外贸</li>
                        <li>财经法务</li>
                        <li>教育咨询</li>
                        <li>媒体设计</li>
                    </ul>
                </div>
                <div class="swiper-slide"></div>
                <div class="swiper-slide"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination swiper-pagination2"></div> //添加swiper-pagination2

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev swiper-button-prev2"></div> //添加swiper-button-prev2
            <div class="swiper-button-next swiper-button-next2"></div> //添加swiper-button-next2

            <!-- 如果需要滚动条 -->
            <div class="swiper-scrollbar swiper-scrollbar2"></div> //添加swiper-scrollbar2
        </div>

调用:

var mySwiper = new Swiper('.swiper-container1', {
    direction: 'horizontal',
    autoplay: true,//可选选项,自动滑动

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination1',
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next1',
        prevEl: '.swiper-button-prev1',
    },

    // 如果需要滚动条
    scrollbar: {
        el: '.swiper-scrollbar1',
    },
})

var mySwiper2 = new Swiper('.swiper-container2', {
    direction: 'horizontal',
    autoplay: false,//可选选项,自动滑动

    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination2',
    },

    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next2',
        prevEl: '.swiper-button-prev2',
    },

    // 如果需要滚动条
    scrollbar: {
        el: '.swiper-scrollbar2',
    },
})           

猜你喜欢

转载自blog.csdn.net/weixin_42450794/article/details/82228175