小编给大家分享一下js插件Swiper有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
Swiper(Swiper master)是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.
初始化
<!DOCTYPE html><html>
<head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="swiper.css?1.1.11"/> <style> .swiper-container { width: 600px; height: 300px; }
.swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } </style>
</head>
<body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div> </div> <!--导航等组件可以放在container之外--> <script src="swiper.js?1.1.11"></script> <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'vertical',// loop: true,// // // 如果需要分页器 pagination: '.swiper-pagination',// // // 如果需要前进后退按钮 nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',// // // 如果需要滚动条 scrollbar: '.swiper-scrollbar',
})</script>
</body></html>基本配置
var mySwiper = new Swiper ('.swiper-container', {
// 滑动方向
// horizontal水平
// vertical垂直
direction: 'horizontal',
// 初始化时候slide的索引(从0开始)
initialSlide: 1,
// 手指松开至slide贴合的时间
speed:3000,
// 设置自动播放的事件间隔
autoplay: 2000,
// 可显示数量
slidesPerView:2,
// 滑块居中
centeredSlides:true,
})触摸设置
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
// 触摸距离与slide滑动距离的比率
touchRatio:0.1,
// 无法滑动
onlyExternal:true,
// 滑块跟随手指进行移动
followFinger:false,
// 定义longSwipesMs
longSwipesMs:1000,
longSwipes:false,
shortSwipes:false,
longSwipesRatio:0.5,
touchAngle:10,
})
禁止切换和前进后退 <body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide stop">Slide 1</div> <!--<div class="swiper-slide swiper-no-swiping">Slide 2</div>--> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <button class="prev">prev</button> <button class="next">next</button> <script src="swiper.js?1.1.11"></script> <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
noSwiping:true,
noSwipingClass : "stop",
nextButton : ".next",
prevButton : ".prev",
}) </script>分页器 <style> .swiper-container { width: 600px; height: 300px; }
.swiper-slide{ font-size: 50px } .swiper-slide:nth-of-type(1){ background-color: cornflowerblue; } .swiper-slide:nth-of-type(2){ background-color: coral; } .swiper-slide:nth-of-type(3){ background-color: yellowgreen; } .swiper-pagination-bullet{ width: 20px; height: 20px; } .swiper-pagination-bullet-active{ background-color: yellow; } </style>
</head>
<body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <div class="swiper-pagination"></div> </div> <script src="swiper.js?1.1.11"></script> <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
pagination : ".swiper-pagination",
paginationType : "bullets",
paginationType : "fraction",
paginationType : "progress",
paginationClickable : true,
paginationHide : true,
paginationElement : "i",
paginationBulletRender : function( swiper,index,classname ){ return "<span class='"+ classname +"'>"+ (index+1) +"</span>" }
})</script>
</body>切换效果 <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
effect : "slide",
effect : "fade",
effect : "cube",
effect : "coverflow",
effect : "flip",
})</script>进程<body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <button id="btn">按钮</button> <script src="swiper.js?1.1.11"></script> <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
})
btn.onclick = function(){
alert( mySwiper.progress );
alert( mySwiper.slides[0].progress );
console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
}
setInterval(function(){
console.log( mySwiper.slides[0].progress,mySwiper.slides[1].progress,mySwiper.slides[2].progress );
},20)</script>
</body>常用属性和回调
<body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> <button id="btn">按钮</button> <script src="swiper.js?1.1.11"></script> <script>
var mySwiper = new Swiper ('.swiper-container', {
direction: 'horizontal',
speed : 2000,
onSlideChangeStart : function(){
console.log( "开始滑动" );
},
onSlideChangeEnd : function(){
console.log( "滑动结束" );
}
})
console.log( mySwiper.width );
console.log( mySwiper.height );
btn.onclick = function(){
console.log( mySwiper.translate );
console.log( mySwiper.activeIndex );
console.log( mySwiper.previousIndex );
} </script>
</body>以上是“js插件Swiper有什么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
