Swiper轮播插件使用

Posted hzb462606

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

 

效果

技术图片

 

技术图片

 

以上是关于Swiper轮播插件使用的主要内容，如果未能解决你的问题，请参考以下文章

求助：swiper轮播图插件设置 slidesPerColumn之后顺序的问题

轮播图插件swiper 的使用

轮播插件vue-awesome-swiper的基本使用

vue中引用swiper轮播插件

轮播插件swiper

swiper轮播图插件