1.swiper: HTML structure
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">slider1</div> <div class="swiper-slide">slider2</div> <div class="swiper-slide">slider3</div> </div> </div>
2. Style
.swiper-container{ margin:0 auto; width:100px; height:200px; overflow: hidden; border:1px solid red; } .swiper-wrapper,.swiper-slide{ width:100px; height:200px; }
3. horizontal carousel
mySwiper new new Swiper = var ( 'Swiper-Container.', { AutoPlay: to true, // Optional, slides automatically Loop: to true })
4. Vertical Rotation
mySwiper new new Swiper = var ( 'Swiper-Container.', { AutoPlay: to true, // Optional, automatic sliding direction: 'vertical', // control the scrolling direction, horizontal or vertical Loop: to true })
5. About switching event
6.