Swiper快速切换插件

swiper2.0和3.0的区别：

3.0支持部分PC端浏览器

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

3.0继续更新，2.7.6停止更新

html结构：

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

插件及参数：

json格式数据配置

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

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

swiper下载：https://www.swiper.com.cn/download/index.html

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

swiper水平滚动基本示例：

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

        ="swiper-pagination"="swiper-button-prev"="swiper-button-next">

    script ="lib/swiper.min.js"script>
        var swiper=new Swiper(".swiper-container,{
            //direction: 'vertical',// 垂直切换选项
            loop: true 循环模式选项
            
             如果需要分页器
            pagination: {
              el: '.swiper-pagination 如果需要前进后退按钮
            navigation: {
              nextEl: .swiper-button-next.swiper-button-prev 如果需要滚动条
             scrollbar: {
               el: '.swiper-scrollbar',
             },
            
            autoplay: {
                delay: 2500falsehtml>

swiper垂直滚动基本示例：

vertical 垂直切换选项
 循环模式选项        

        });
    >

3D效果翻转

>
        
     swiper = coverflowauto501001>

进度条效果 scrollbar

="swiper-scrollbar".swiper-scrollbar>

使用swiper完成tab效果

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

box-sizingborder-box
        atext-decorationnone
        .tabsposition fixedleftbottom45pxline-heightbackground#fffcolor#333z-index999border-top1px solid #cccfont-size
        .tabs adisplay inline-block25%text-align center14px
        .tabs a.active#eeered-webkit-tap-highlight-color rgba(255,0)-webkit-user-select none-moz-user-focus-moz-user-select="tabs"a href="#" class="active">课程a="#">下载>发现>我的>        

    ="lib/jquery-1.11.3.min.js"动画结束时获取当前索引
                slideChangeTransitionStart: function(){
                     indexthis.activeIndex;                    
                    tabActive(index); 切换时更新tab样式
                },});

        点击tab切换轮播图
        $(.tabs a).on(click(e){
            e.preventDefault();阻止默认事件
            $().index();获取当前点击的索引
            tabActive(index);            swiper.slideTo(index);切换对应的轮播图
        });

        更新tab样式
         tabActive(index){
            $().removeClass(active);
            $().eq(index).addClass();
        }

    >

Swiper快速切换插件

相关推荐