欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-03-25 12:25:28
...
    <!-- 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',
    },
})           

 

相关标签: swiper