Shulou(Shulou.com)06/03 Report--

Editor to share with you what is the use of the js plug-in Swiper, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Swiper (Swiper master) is a widely used mobile web page touch content sliding js plug-in, which can be used for carousel and sliding.

Initialization

.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 } Slide 1 Slide 2 Slide 3 var mySwiper = new Swiper ('.swiper-container', {direction:' vertical',// loop: true,// if you need a pager pagination: '.swiper-pagination' / / if you need forward and backward button nextButton: '.swiper-button-next', prevButton:' .swiper-button-prev',// if you need scroll bar scrollbar: '.swiper-scrollbar',})

Basic configuration

Var mySwiper = new Swiper ('.swiper-container', {/ / sliding direction / / horizontal horizontal / / vertical vertical direction:' horizontal', / / index of slide at initialization (starting at 0) initialSlide: 1 / / time the finger is released to the slide fit speed:3000, / / set the event interval for automatic playback autoplay: 2000, / / the number of slidesPerView:2 can be displayed / / Slider center centeredSlides:true,})

Touch Settin

Var mySwiper = new Swiper ('.swiper-container', {direction:' horizontal', / / ratio of touch distance to slide sliding distance touchRatio:0.1, / / cannot slide onlyExternal:true, / / slider follows the finger to move followFinger:false / / define longSwipesMs longSwipesMs:1000, longSwipes:false, shortSwipes:false, longSwipesRatio:0.5, touchAngle:10,}) prohibit switching and forward and backward Slide 1 Slide 2 Slide 3 prev next var mySwiper = new Swiper ('. Swiper-container' {direction: 'horizontal', noSwiping:true, noSwipingClass: "stop", nextButton: ".next", prevButton: ".prev",}) pager. 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 } Slide 1 Slide 2 Slide 3 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 "+ (index+1) +"}}) switching effect var mySwiper = new Swiper ('.swiper-container') {direction: 'horizontal', effect: "slide", effect: "fade", effect: "cube", effect: "coverflow", effect: "flip" }) process Slide 1 Slide 2 Slide 3 button 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)

Common properties and callbacks

Slide 1 Slide 2 Slide 3 button var mySwiper = new Swiper ('.swiper-container', {direction:' horizontal', speed: 2000, onSlideChangeStart: function () {console.log ("start sliding") }, onSlideChangeEnd: function () {console.log ("sliding end");}}) console.log (mySwiper.width); console.log (mySwiper.height); btn.onclick = function () {console.log (mySwiper.translate) Console.log (mySwiper.activeIndex); console.log (mySwiper.previousIndex);} these are all the contents of the article "what's the use of the js plug-in Swiper?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.