标签：el pagination false 轮播 js 切换 swiper

引入css，js

 <script src="http://www.swiper.com.cn/dist/js/swiper.min.js"></script>

 <link href="http://www.swiper.com.cn/dist/css/swiper.min.css" />

html内容

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://www.swiper.com.cn/templets/default/images/home/iphoneX.png" class="topbox">
            </div>
            <div class="swiper-slide">
                <img src=" https://www.swiper.com.cn/templets/default/images/home/iphone8.png" class="topbox">
            </div>
            <div class="swiper-slide">
                <img src="https://www.swiper.com.cn/templets/default/images/home/ipad.png" class="topbox">
            </div>
        </div>
    </div>
    <div class="page">
        <div class="pagination"></div>
    </div>

js内容

var mySwiper = new Swiper('.swiper-container', {
    loop: true, //环路
    direction: 'horizontal', // 横向切换
    autoplay: { //自动切换
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    pagination: {
        el: '.pagination',
        type: 'fraction',
    },
});

Swiper4.x使用方法

标签：el,pagination,false,轮播,js,切换,swiper
来源： https://blog.csdn.net/xxwd12/article/details/99307426

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。