更多实例，可以查看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互相控制
（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）
注意：设定透明度或缩放必须同时设定位移，否则无效
（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);
});
首先我们需要明白swiper 想要速度的效果是需要用到 transition-timing-function: 这个参数的 其次需要配合speed:1200,使用 lin
最后一屏底部自动高度的方法为 slidesPerView:auto, css代码 .foot{height:auto!important;} 但是这种情况会出现滚动到最后一屏的
slidesPerView:1,autoplay:3000,direction:vertical,grabCursor:true,autoplayDisableOnInteraction:false,mousewheelControl:true,autoHeight:true,//重点就是
直接鼠标hover模拟click即可！ $(.swiper-pagination-bullet).hover(function(){$(this).click();//鼠标划上去之后，自动触发点击事件来
swiper嵌套的swiper怎样实现鼠标滚动切换，当嵌套的切换完之后，在继续切换外面的swiper !DOCTYPEhtml!--savedfromurl=(0044)ht
Swiper默认的切换时间曲线是ease，可以通过添加css3的transition-timing-function属性来改变。 改变Swiper切换的时间曲线 .swi
列表字段内可有可无的显示方法(有则显示..无则不显示或者显示其...2021-04-16 
织梦自定义表单用js代替联动地区解决联动地区选择2021-04-14 
dedecms织梦在搜索结果页按栏目分块显示数据2021-04-12 
自定义热门搜索关键词2023-03-05 
tab选项卡2022-07-27 
帝国CMS7.5调用网站栏目之单页内容文本，eclasspagetext这样用2022-03-29 
scrollTop实用示例2020-11-23 
channelartlist有下级栏目时输出对应的html标签，反之不输出2021-04-12 
swiper实战2022-10-22 
js网页禁止右键下载代码2022-02-16 
