Swiper实战Demo大全

青春..荒唐

浏览: 972745 次
性别:

最近访客更多访客>>

lliiqiang

nbczw8750

kingkongzmc

lokily

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

前端插件
常见特效

前端插件常见特效

【前言】

本文我用Swiper.js来做一些常见的特效案例，关于手机和PC的适配也做了一些处理，在这里分享记录下

效果展示方面可以看我的git，最后发下Demo效果链接

更多实例，可以查看Swiper官方展示http://www.swiper.com.cn/demo/web/index.html

【列表】

（1）基础滑动

（2）按钮切换

（3）分页

（4）分页器 / 动态指示点

（5）进度条指示器

（6）分式指示器

（7）自定义指示器

（8）滚动条

（9）垂直切换

（10）slides之间设置间隔

（11）过渡前执行动画

（12）一页显示多个Slides

（13）自定义slide宽度 / Carousel转盘模式

（14）slides居中

（15）Slides居中 + 自定义Slides宽度

（16）free自由模式 / 不贴合边缘

（17）垂直方向内容滚动

（18）多行slides分布

（19）Swipers嵌套

（20）抓手光标

（21）Loop模式 / 无限循环模式

（22）Loop模式+Slides分组

（23）切换效果

（24）键盘控制

（25）鼠标滚轮控制

（26）自动切换

（27）动态添加Slides

（28）缩略图控制 / Swiper互相控制

（29）缩略图控制 / 无限循环

（30）视差效果

（31）延迟加载图片

（32）响应式设置

（33）虚拟Slides

【主体】

先写出基础页面架构

<div class="swiper-container ">
    <div class="swiper-wrapper">
        <div class="swiper-slide">1</div>
        <div class="swiper-slide">2</div>
        <div class="swiper-slide">3</div>
    </div>
</div>

（1）基础滑动

初始化Swiper

 var mySwiper = new Swiper('.swiper-container');

（2）按钮切换

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
//以下为JS代码
navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
},

（3）分页

<div class="swiper-pagination"></div>
//以下为JS代码
pagination: {//分页
            el: '.swiper-pagination',
},

（4）分页器 / 动态指示点

pagination: {//分页
            el: '.swiper-pagination',//添加分页
            dynamicBullets: true,//动态指示点
},

（5）进度条指示器

pagination: {//分页
            el: '.swiper-pagination',//添加分页
            type: 'progressbar',//进度条指示器
},

（6）分式指示器

pagination: {//分页
            el: '.swiper-pagination',//添加分页
            type: 'fraction',//分式指示器
},

（7）自定义指示器

//css
.swiper-pagination-bullet {
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
            color: #000;
            opacity: 1;
            background: rgba(0,0,0,0.2);
}
.swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
}
//JS代码
pagination: {//分页
            el: '.swiper-pagination',
            clickable: true,//分页指示点可点击
            renderBullet: function (index, className) {//分页点加索引
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            },
},

（8）滚动条

<div class="swiper-scrollbar"></div>
//以下为JS代码
 scrollbar: {
            el: '.swiper-scrollbar',
            hide: true,//控制显示隐藏
},

（9）垂直切换

//CSS代码
#Swiper-first{
         width: 100%;
         height: 300px;
         overflow-y: hidden;
}
<!--垂直分页-->
<div class="swiper-pagination"></div>
//以下为JS代码
direction: 'vertical',
pagination: {
      el: '.swiper-pagination',
      clickable: true,
},

（10）slides之间设置间隔

spaceBetween: 30,//设置slides间隔

（11）过渡前执行动画

①添加类名和参数，在需要运动的元素上面增加类名ani，具体可以参考文章Swiper Animate用法详解

②JS控制显示添加删除

<div class="swiper-container" id="Swiper-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInUp">内容1</p>
        </div>
        <div class="swiper-slide"><p>
            <p class="ani" swiper-animate-effect="fadeInLeft">内容2</p>
        </div>
        <div class="swiper-slide">
            <p class="ani" swiper-animate-effect="fadeInDown">内容3</p>
        </div>
    </div>
    <div class="swiper-pagination"></div>
</div>
//JS代码
var mySwiper = new Swiper ('.swiper-container', {  
    on:{  
      init: function(){  
        swiperAnimateCache(this); //隐藏动画元素   
        swiperAnimate(this); //初始化完成开始动画  
      },   
      slideChangeTransitionEnd: function(){   
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画  
      }   
    }  
  })

（12）一页显示多个Slides

slidesPerView: 3,

（13）自定义slide宽度 / Carousel转盘模式

//CSS代码
.swiper-slide{
       width: 80%;
}
//JS代码
slidesPerView: 'auto'//开启slide宽度自定义功能

（14）slides居中

适用于一页显示多个Slides的幻灯片

slidesPerView: 4,//一页4个
centeredSlides: true,//首个居中

（15）Slides居中 + 自定义Slides宽度

slidesPerView: 'auto'//开启slide宽度自定义功能
centeredSlides: true,//首个居中

（16）free自由模式 / 不贴合边缘

freeMode: true,

（17）垂直方向内容滚动

<!--滚动条-->
<div class="swiper-scrollbar"></div>
//JS代码
direction: 'vertical',
        slidesPerView: 'auto',//自定义宽度/高度
        freeMode: true,//自由模式
        scrollbar: {
            el: '.swiper-scrollbar',
},
mousewheel: true,// 开启鼠标滚轮

（18）多行slides分布

//CSS 
.swiper-container {
            width: 100%;
            height: auto;
            margin-left: auto;
            margin-right: auto;
}
//JS代码
slidesPerColumn: 2,//两行

（19）Swipers嵌套

<div class="swiper-container" id="Swiper-one">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            1
        </div>
        <div class="swiper-slide">
            <div class="swiper-container" id="Swiper-two">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">1</div>
                    <div class="swiper-slide">2</div>
                    <div class="swiper-slide">3</div>
                </div>
                <div class="swiper-pagination swiper-pagination-v"></div>
            </div>
        </div>
        <div class="swiper-slide">
            3
        </div>
    </div>
    <div class="swiper-pagination swiper-pagination-h"></div>
</div>
//JS代码
<script>
    var swiperH = new Swiper('#Swiper-one', {
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination-h',
            clickable: true,
        },
    });
    var swiperV = new Swiper('#Swiper-two', {
        direction: 'vertical',
        spaceBetween: 50,
        pagination: {
            el: '.swiper-pagination-v',
            clickable: true,
        },
    });
</script>

（20）抓手光标

grabCursor: true,

（21）Loop模式 / 无限循环模式

loop: true,

（22）Loop模式+Slides分组

slidesPerView: 3,
spaceBetween: 30,
slidesPerGroup: 3,
loop: true,
loopFillGroupWithBlank: true,//在loop模式下，为group填充空白slide

（23）切换效果

①渐变切换

effect: 'fade',//淡入

②3D方块切换

effect:'cube'//方块

③3D滚动切换

effect:'coverflow'//3D流

④3D翻转切换

effect:'flip'//翻动

（24）键盘控制

keyboard: {
        enabled: true,//启用键盘
},

（25）鼠标滚轮控制

mousewheel: true,//开启滚轮

（26）自动切换

autoplay:true,
//等同于以下设置
autoplay: {
   delay: 3000,/延迟300ms
   stopOnLastSlide: false,//是否停在最后一张
   disableOnInteraction: true,//开启交互
},

（27）动态添加Slides

<p class="append-buttons">
    <a href="#" class="prepend-2-slides">Prepend 2 Slides</a>
    <a href="#" class="prepend-slide">Prepend Slide</a>
    <a href="#" class="append-slide">Append Slide</a>
    <a href="#" class="append-2-slides">Append 2 Slides</a>
  </p>
//JS代码
    var appendNumber = 4;
    var prependNumber = 1;
    document.querySelector('.prepend-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide([
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (--prependNumber) + '</div>'
        ]);
    });
    document.querySelector('.prepend-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.prependSlide('<div class="swiper-slide">Slide ' + 
         (--prependNumber) + '</div>');
    });
    document.querySelector('.append-slide').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide('<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>');
    });
    document.querySelector('.append-2-slides').addEventListener('click', function (e) {
      e.preventDefault();
      swiper.appendSlide([
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>',
        '<div class="swiper-slide">Slide ' + (++appendNumber) + '</div>'
        ]);
    });

（28）缩略图控制 / Swiper互相控制

具体我在文章Swiper缩略图Demo里做了案例

（29）缩略图控制 / 无限循环

经过测试后，发现稳定性较差，存在BUG

（30）视差效果

parallax（视差）类型：boolean 默认：false

设置为true开启视差效果，效果可以应用于container或slide的子元素

效果列表：

1.视差位移变化

在所需要的元素上增加data-swiper-parallax属性（与Swiper切换方向相同）或data-swiper-parallax-x （x方向） data-swiper-parallax-y（y方向）

data-swiper-parallax接受两种类型的参数

number（单位：px），如-300，从右边300px进入左边出去；

percentage（百分比），移动距离=该元素宽度 * percentage

2.透明度变化data-swiper-parallax-opacity，可选值0-1

3.缩放变化data-swiper-parallax-scale属性

4.持续时间data-swiper-parallax-duration设定视差动画持续时间（ms）

注意：设定透明度或缩放必须同时设定位移，否则无效

案例：

具体我在文章Swiper视差效果Demo里做了案例

（31）延迟加载图片

<div class="swiper-container">
    <div class="swiper-wrapper">
        <!-- 延迟加载图片的结构 -->
        <div class="swiper-slide">
            <img data-src="path/to/picture-1.jpg" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- 使用srscet的延迟加载图片的结构(注：2x,2倍分辨率如retina屏幕时加载)-->
        <div class="swiper-slide">
            <img data-src="path/to/logo-small.png" 
             data-srcset="path/logo/logo-large.png 2x" class="swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>

        <!-- 延迟加载背景图的结构 -->
        <div class="swiper-slide">
            <div data-background="path/to/picture-2.jpg" class="swiper-lazy">
                <div class="swiper-lazy-preloader"></div>
            </div>
        </div>

        <!-- slide的背景延迟加载 -->
        <div data-background="path/to/picture-3.jpg" class="swiper-slide swiper-lazy">
            <div class="swiper-lazy-preloader"></div>
        </div>
    </div>
</div>

<script> 
var mySwiper = new Swiper('.swiper-container', {
  lazy: {
    loadPrevNext: true,
  },
});
</script>

（32）响应式设置

主要原理是断点设置

breakpoints: {
        1024: {
          slidesPerView: 4,
          spaceBetween: 40,
        },
        768: {
          slidesPerView: 3,
          spaceBetween: 30,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        320: {
          slidesPerView: 1,
          spaceBetween: 10,
        }
      }

（33）自动高度

autoHeight: true, //启用自动高度

（34）虚拟Slides

<div class="swiper-pagination"></div>
//JS代码
pagination: {
            el: '.swiper-pagination',
            type: 'fraction',
},
virtual: {
            slides: (function () {
                var slides = [];
                for (var i = 0; i < 600; i += 1) {
                    slides.push('Slide ' + (i + 1));
                }
                return slides;
            }()),
},
document.querySelector('.slide-1').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(0, 0);
});
document.querySelector('.slide-250').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(249, 0);
});
 document.querySelector('.slide-500').addEventListener('click', function (e) {
        e.preventDefault();
        swiper.slideTo(499, 0);
});

（35）可滑动菜单

我在后面文章Swiper滑动菜单Demo里做了总结

分享到：

Swiper缩略图Demo | 多功能手表

2018-03-09 11:26
浏览 9110
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论