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

Swiper快速切换插件

程序员文章站 2022-03-10 16:14:16
swiper2.0和3.0的区别： 3.0支持部分PC端浏览器 3.0合并js，新增动画功能animate.css 3.0继续更新，2.7.6停止更新 html结构：

swiper2.0和3.0的区别：

3.0支持部分pc端浏览器

3.0合并js，新增动画功能animate.css

3.0继续更新，2.7.6停止更新

 

html结构：

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

 

插件及参数：

json格式数据配置

参数值为数字、字符串、函数

支持各种状态的轮播回调，参数只有一个，就是当前轮播的对象

 

swiper下载：

（我下的最新版已经到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快速切换插件

 

 

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>

Swiper快速切换插件

 

 

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>

Swiper快速切换插件

 

进度条效果 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快速切换插件

 

使用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>

Swiper快速切换插件

上一篇： web前端入门到实战：学习web前端流程以及职场规划

下一篇： [译文]Domain Driven Design Reference（三）—— 模型驱动设计的构建模块

推荐阅读