Swiper轮播插件使用

前文

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端，能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

归根到此，Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择,在PC网页端也有很好的应用！

官方：https://www.swiper.com.cn/

官方API文档：https://www.swiper.com.cn/api/index.html

官方资源下载：https://www.swiper.com.cn/download/index.html

引入资源

<link  href="dist/css/swiper.min.css"  rel="stylesheet"> <!-- 注意，必须强制添加rel节点，不然不能正常使用 -->
<script src="dist/js/swiper.min.js"></script>

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link  href="dis/css/swiper.min.css"  rel="stylesheet"> <!---->
    <style>
        /* 设置轮播组件的高宽 */
        .swiper-container {
            width:1500px;
            height: 420px;
        }  
    </style>
   
</head>
<body>
    <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="images/one.png"></div>
                <div class="swiper-slide"><img src="images/two.png"></div>
                <div class="swiper-slide"><img src="images/three.png"></div>
                <div class="swiper-slide"><img src="images/four.png"></div>
                <div class="swiper-slide"><img src="images/five.png"></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
            
            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->
        </div>
        <script src="dis/js/swiper.min.js"></script>
        <script src="dis/js/jquery-1.11.3.min.js"></script>
        <script>
            $(function(){
                var mySwiper = new Swiper ('.swiper-container', {
                    direction: 'horizontal', // 水平切换选项,
                    loop: true, // 循环模式选项
                    
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    
                    // 如果需要滚动条
                    // scrollbar: {
                    //     el: '.swiper-scrollbar',
                    // },
                    //自动播放
                    autoplay: {
                        autoplay:true,//自动播放
                        delay:3000, //自动切换的时间间隔，单位ms
                        disableOnInteraction :false //如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
                    },
                    on:{
                        autoplayStart:function(){
                            console.log('开启自动切换');
                        },
                        autoplayStop:function(){
                            console.log('关闭自动切换');
                        }
                    }
                })        
            })
        </script>
</body>
</html>

效果