Swiper.js插件超简单实现轮播图
Swiper是纯javascript打造的滑动特效插件，⾯向⼿机、平板电脑等移动终端。能实现触屏焦点图、触屏Tab切换、触屏多图切换等常⽤效果。超好⽤
话不多说，直接上教程
1、⾸先加载插件，需要⽤到的⽂件有swiper.min.js和swiper.min.css⽂件。可下载⽂件或使⽤。
<!-- Link Swiper-->
<link rel="stylesheet" href="cdnjs.cloudflare/ajax/libs/Swiper/4.0.2/css/swiper.min.css" rel="external nofollow" >
<script src="cdnjs.cloudflare/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
请勿直接引⼊Swiper中⽂⽹的⽂件
x <script src="www.swiper/dist/js/swiper.min.js"></script>
x <link href="www.swiper/dist/css/swiper.min.css" rel="external nofollow" />
2、CSS样式
<style>
.swiper-container {
//你可以在这⾥设置宽⾼
width: 50%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/
* Center slide text vertically */
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
img{
width:250px;
}
</style>
3、HTML
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/000.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/001.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/002.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/003.jpg" alt=""></div>
<div class="swiper-slide"><img src="img/004.jpg" alt=""></div>
//添加图⽚
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
4、javaScript
<script>
var swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
效果图
你只需要替换⼀下图⽚，和修改⼀下图⽚及轮播图的⼤⼩就可以轻轻松松写出⼀个很棒的轮播图，怎么样是不是很简单
补充：怎么⽤swiper实现匀速⽆缝轮播
1.设置属性
freeMode:true,
autoplay: {
delay:0
}
2.然后再修改或者覆盖样式
.swiper-container-free-mode>.swiper-wrapper {
-webkit-transition-timing-function: linear; /*之前是ease-out*/
-moz-transition-timing-function: linear;
-ms-transition-timing-function: linear;
-o-transition-timing-function: linear;
transition-timing-function: linear;
margin: 0 auto;
}
补充2：移动端swiper.js中的坑
步骤：
1，渲染⽇历：⽇历是⾃⼰开发的（注意⼏点：1，获得当前⽇期；2，⼀个⽉多少天；3，闰⽉情况；4，每个⽉1号是礼拜⼏；。。。）
2，因项⽬⽐较近，所以采⽤了swiper.js控件来做滑动效果；
问题：
1，⾸先遇到的是在ios上测试是没有问题的，包括UC，百度等浏览器；不过在魅族，华为⼿机上测试出现问题了-----不能来回切换；
解决⽅法：考虑到应该是兼容性问题，于是乎查swiper.js官⽅⽂档，因为当时只是引⽤了swiper.js，⽽没有引⼊swiper.css 和swiper.animate.js；
重新引⼊后，ok了，问题得到解决；
<link rel="stylesheet" href="../../styles/library/swiper.min.css" rel="external nofollow" />
<script src="../../scripts/common/swiper-3.3.1.min.js"></script>
<script src="../../scripts/common/swiper.animate.min.js"></script>
2，引⼊需要的⽂件后，发现ios和安卓浏览器是没有问题的，但是，安卓app⾥⼜出现问题了，来回切换不流畅，此时⾃⼰也是百度了⼀下，没有到解决⽅法
最后还得看官⽅⽂档，查看属性和⽅法
解决⽅案：
// 轮播图--左右滑动和切换
var mySwiper = new Swiper('.swiper-container',{
pagination: '.pagination',
loop:false,
mode: 'horizontal',
freeMode:false,
touchRatio:0.5,
longSwipesRatio:0.1,
threshold:50,
followFinger:false,
observer: true,//修改swiper⾃⼰或⼦元素时，⾃动初始化swiper
observeParents: true,//修改swiper的⽗元素时，⾃动初始化swiper
onSlideChangeEnd:function(swiper){ // 当滑动结束后---⽉份⽇期切换同步左右左右切换
changeMonth();
}
});
注意：初始化的时候添加的这⼏个属性，有不明⽩的可以查看官⽅⽂档；
温馨提⽰：swper.js我⽤的3xxx版本以上的，各个版本差别还是挺⼤的！
到此这篇关于Swiper.js插件超简单实现轮播图的⽂章就介绍到这了，更多相关Swiper.js 轮播图内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！js制作简单的焦点图效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。