【前言】
本文我用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里做了总结
.
相关推荐
在这个“微信小程序米播商城源码demo hello world 尝鲜.zip”压缩包中，包含了一个完整的微信小程序示例项目，特别适合开发者进行实战练习、教学演示以及快速构建线上商城应用。 首先，我们要关注的是“轮播图+菜单...
为方便自己和大家对vue的学习，在‘vue前期准备知识点’文件中，特地对vue开发需要前期准备的基础知识及注意点，一条条进行了总结，并且对难点写了demo。vue的基础知识，在 “vue前期准备知识点” 目录中。项目实战...
最后的"微信小程序服务端开发demo"则可能包含了后端服务的开发示例，展示了如何与小程序前端进行数据交互，包括API接口设计、鉴权和数据安全等方面。 通过这些案例，开发者不仅可以学习到微信小程序的基本语法和...
本文将详细讲解iOS应用开发的基础知识，以Swift4语言为背景，结合“今日头条”实战项目的步骤，包括项目创建、第三方库集成、目录结构建立、图标设置、UI组件的定制以及运行调试。首先，我们从新建iOS项目开始。 1....
- **实战项目**：可以尝试自己动手实现一个简单的图片滚动轮播功能，逐步添加更多高级特性。 - **参考资料**：参考在线教程、开源框架（如Swiper）等资源，学习更复杂的实现方法。 通过以上内容的学习和实践，可以...