Hatena In this article, I am going to introduce 16 Demo slider which can be made by swiper.js.
And you can refer the link below each demo to see how to create.
①Normal slider
Firstly, normal slider without any customization.
②Customized arrows
Next, the slider which its arrows are replaced by any image.
③Customized pagination
The slider which its pagination are replaced by any image.
④Put arrows and dots outside
The slider which its arrows and dots are put outside slides.
To put arrows outside, little contrivance is needed.
⑤Thumbnail slider
The slider which has thumbnail.
It can be made by interlocking two sliders.
⑥Show parts of both sides
The slider which its parts of both sides are shown.
It can be made by slidesPerView option.
⑦Double slider
Double slider which main slider and text slider are interlocked.
It can be made by thumbs option.
⑧Infinite loop slider
Infinite loop slider which continue to flow automatically.
We can’t make it just using swiper option, CSS is need as well.
⑨Vertical slider
The slider which move vertically.
It can be made by direction option.
⑩Grid slider
The slider which the multiple slides are shown in vertical direction and horizontal direction.
It can be made by grid option and slidesPerView option.
⑪Lazy load
We can do lazy loading by lazy option which is attached to swiper.js.
Improvement of display speed is expected by reducing resources when loading.
⑫Cube slider
The slider which is three‐dimensional .
It can be made by effect option.
⑬Card slider
The slider which looks like multiple cards.
It can be made by effect option.
⑭Coverflow slider
Coverflow slider.
It can be made by effect option.
⑮Flip slider
Flip slider which move like turning over.
It can be made by effect option.
⑯Slider which the accessibility is improved
It is the slider which the accessibility is improved by implementing the following three.
- Make the pagination clickable
- Make the slider operatable by keyboards
- Make the slider operatable by mousewheel or trackpad
That is all, I introduced 16 Demo slider which can be made by swiper.js
Please try to create any!
