Swiper快速切換插件

時間  2020-03-27
標籤 swiper 快速 切換 插件 简体版
原文   原文鏈接

swiper2.0和3.0的區別：css

3.0支持部分PC端瀏覽器html

3.0合併js，新增動畫功能animate.cssjquery

3.0繼續更新，2.7.6中止更新web

 

html結構：json

    <div class="swiper-container">
        <div class="swiper-wrap">
            <div class="swiper-slide">
            </div>
        </div>
    </div>

 

插件及參數：瀏覽器

json格式數據配置app

參數值爲數字、字符串、函數ide

支持各類狀態的輪播回調，參數只有一個，就是當前輪播的對象函數

 

swiper下載：https://www.swiper.com.cn/download/index.htmloop

（我下的最新版已經到swiper5了）

 

swiper水平滾動基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="lib/swiper.min.css">
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;}
        .swiper-container,.swiper-wrapper,.swiper-slide img{width:100%;}
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/003.png"></div>
            <div class="swiper-slide"><img src="image/002.png"></div>
            <div class="swiper-slide"><img src="image/001.png"></div>
            <div class="swiper-slide"><img src="image/004.png"></div>
        </div>

        <div class="swiper-pagination"></div>

        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>
    <script src="lib/swiper.min.js"></script>
    <script>
        var swiper=new Swiper(".swiper-container", {
            //direction: 'vertical', // 垂直切換選項
            loop: true, // 循環模式選項
            
            // 若是須要分頁器
            pagination: {
              el: '.swiper-pagination',
            },
            
            // 若是須要前進後退按鈕
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },
            
            // 若是須要滾動條
            // scrollbar: {
            //   el: '.swiper-scrollbar',
            // },
            
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            }
        });
    </script>
</body>
</html>

 

 

swiper垂直滾動基本示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="lib/swiper.min.css">
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;}
        .swiper-container,.swiper-wrapper,.swiper-slide img{width:100%;}
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/003.png"></div>
            <div class="swiper-slide"><img src="image/002.png"></div>
            <div class="swiper-slide"><img src="image/001.png"></div>
            <div class="swiper-slide"><img src="image/004.png"></div>
        </div>

    </div>
    <script src="lib/swiper.min.js"></script>
    <script>
        var swiper=new Swiper(".swiper-container", {
            direction: 'vertical', // 垂直切換選項
            loop: true, // 循環模式選項        

        });
    </script>
</body>
</html>

 

 

3D效果翻轉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="lib/swiper.min.css">
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;}
        .swiper-container,.swiper-wrapper,.swiper-slide img{width:100%;}
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/003.png"></div>
            <div class="swiper-slide"><img src="image/002.png"></div>
            <div class="swiper-slide"><img src="image/001.png"></div>
            <div class="swiper-slide"><img src="image/004.png"></div>
        </div>

        <div class="swiper-pagination"></div>
        
    </div>
    <script src="lib/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
          effect: 'coverflow',
          grabCursor: true,
          centeredSlides: true,
          slidesPerView: 'auto',
          coverflowEffect: {
            rotate: 50,
            stretch: 0,
            depth: 100,
            modifier: 1,
            slideShadows : true,
          },
          pagination: {
            el: '.swiper-pagination',
          },
        });

    </script>
</body>
</html>

 

進度條效果 scrollbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="lib/swiper.min.css">
    <style>
        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;}
        .swiper-container,.swiper-wrapper,.swiper-slide img{width:100%;}
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/003.png"></div>
            <div class="swiper-slide"><img src="image/002.png"></div>
            <div class="swiper-slide"><img src="image/001.png"></div>
            <div class="swiper-slide"><img src="image/004.png"></div>
        </div>

        <div class="swiper-scrollbar"></div>
        
    </div>
    <script src="lib/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
          scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,
          },
        });

    </script>
</body>
</html>

 

使用swiper完成tab效果

查看官方API文檔--events事件--sliderMove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" href="lib/swiper.min.css">
    <style>
        *{margin:0;padding:0;box-sizing:border-box;}
        html,body{width:100%;height:100%;}
        a{text-decoration:none;}
        .swiper-container,.swiper-wrapper,.swiper-slide img{width:100%;}
        .tabs{position: fixed;left:0;bottom:0;height:45px;line-height:45px;background:#fff;color:#333;z-index:999;width:100%;border-top:1px solid #ccc;font-size:0;}
        .tabs a{display: inline-block;width:25%;text-align: center;color:#333;font-size:14px;}
        .tabs a.active{background:#eee;color:red;}
        a{-webkit-tap-highlight-color: rgba(255, 255, 255, 0);-webkit-user-select: none;-moz-user-focus: none;-moz-user-select: none;}
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="image/003.png"></div>
            <div class="swiper-slide"><img src="image/002.png"></div>
            <div class="swiper-slide"><img src="image/001.png"></div>
            <div class="swiper-slide"><img src="image/004.png"></div>
        </div>

        <div class="tabs">
            <a href="#" class="active">課程</a>
            <a href="#">下載</a>
            <a href="#">發現</a>
            <a href="#">個人</a>
        </div>        

    </div>

    <script src="lib/jquery-1.11.3.min.js"></script>
    <script src="lib/swiper.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
           on:{
                   //動畫結束時獲取當前索引
                slideChangeTransitionStart: function(){
                    var index=this.activeIndex;                    
                    tabActive(index);// 切換時更新tab樣式
                },
            },
        });

        //點擊tab切換輪播圖
        $(".tabs a").on("click",function(e){
            e.preventDefault();//阻止默認事件
            var index=$(this).index();//獲取當前點擊的索引
            tabActive(index);// 切換時更新tab樣式
            swiper.slideTo(index);//切換對應的輪播圖
        });

        //更新tab樣式
        function tabActive(index){
            $(".tabs a").removeClass("active");
            $(".tabs a").eq(index).addClass("active");
        }

    </script>
</body>
</html>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程