一个简单实用的js插件--Swiper
导读：收集整理的这篇文章主要介绍了一个简单实用的js插件--Swiper，觉得挺不错的，现在分享给大家，也给大家做个参考。SwiPEr(Swiper master 是目前应用较广泛的移动端网页触摸内容滑动js插件,可以用来做轮播和滑动.初始化&l...
收集整理的这篇文章主要介绍了一个简单实用的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的详细内容，更多请关注其它相关文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 一个简单实用的js插件--Swiper
本文地址： https://pptw.com/jishu/583510.html