swiper.js demo---autoslider
Unexpectedly finding a easy plug-In called swiper.js made me feel activity a lot.
First,layout the html like this with the pagination and arrow buttons.
Of course, you need to link the swiper.css and the swiper.js in the head.
Secondly,It's flexible to style the div within main.css which should be linked in the Html head part.
The last step is miracle using swiper() .
pagination is the nav at the bottom of div.
nextButton and preButton are two arrow buttons for clicking to slide.
spaceBetween is the space between slides.
loop is for slide to the first one when you reach the last.
centeredSlides is centered the content.
autoPlay is sliding automatically.
autoplayDisableOnInteraction: when your mouse in the div, autoplay will not stop with the attribute false.
More official functions check on https://github.com/nolimits4web/Swiper
My demo download here https://pan.baidu.com/s/1dFpwSjn
Of course, you need to link the swiper.css and the swiper.js in the head.
Secondly,It's flexible to style the div within main.css which should be linked in the Html head part.
The last step is miracle using swiper() .
pagination is the nav at the bottom of div.
nextButton and preButton are two arrow buttons for clicking to slide.
spaceBetween is the space between slides.
loop is for slide to the first one when you reach the last.
centeredSlides is centered the content.
autoPlay is sliding automatically.
autoplayDisableOnInteraction: when your mouse in the div, autoplay will not stop with the attribute false.
More official functions check on https://github.com/nolimits4web/Swiper
My demo download here https://pan.baidu.com/s/1dFpwSjn
