Swiper-Carousel image ., Swiper-Carousel
Swiper master (Swiper master) is a js plug-in that is widely used in mobile webpage touch content slide. It can be used for carousel and slide.
Initialization
<! DOCTYPE html>
Var mySwiper = new Swiper ('. swiper-iner ', {// slide direction // horizontal // vertical ction: 'horizontal', // The index of slide during initialization (starting from 0) initialSlide: 1, // The time when the finger is released to slide fitting speed: 3000, // sets the auto-Playback event interval autoplay: 2000, // The number of displayed slidesPerView: 2, // the slider is centered on centeredSlides: true ,})
Touch settings
Var mySwiper = new Swiper ('. swiper-iner ', {ction: 'horizontal', // touchRatio: 0.1, // unable to slide onlyExternal: true, // move the slider following your finger followFinger: false, // defines longSwipesMs: 1000, longSwipes: false, swswipes: false, longSwipesRatio: 0.5, touchAngle: 10 ,}) disable switching and backward <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> <button class = "prev"> prev </button> <button class = "next"> next </button> <script src = "swiper. js "> </script> <script> var mySwiper = new Swiper ('. swiper-iner ', {ction: 'horizontal', noSwiping: true, noSwipingClass: "stop", nextButton :". next ", prevButton :". prev ",}) </script> page splitter <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>
Common attributes and callbacks
<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> <button id = "btn"> button </button> <script src = "swiper. js "> </script> <script> var mySwiper = new Swiper ('. swiper-iner ', {ction: '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. previusindex) ;}</script> </body>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
