Swiper Js is a cool little library that allows us to make carousel sliders in 3 minutes or less.
We can load it directly into our project with a CDN, install it via NPM, or even just download the files from GitHub to get started. Using their library, we can create a normal slider, 3D cube, and even a parallax slider with some cool fade effects.
The topics we will cover include:
- Installation of SwiperJS
- Setting up Swiper JS code in HTML and CSS
- Styling the Swiper
- Styling the Swiper
- 3D cube Carousel Slider
- Parallax Slider with Fade Effects
If you are interested in seeing just how simple the code is, check it out below:
<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<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>
</div>
</div>
<script>
var mySwiper = new Swiper ('.swiper-container')
</script>
Swiper Js can be installed into any project, plain HTML, WordPress or even react. If you are interested in them, you can check them out at their official URL:
https://swiperjs.com/
Follow and support me:
Special thanks if you subscribe to my channel :)
Want to see more:
I will try to post new great content every day. Here are the latest items:
Top comments (3)
Amazing tutorial, but there is a way to make the first image random??
I just used it, it's so simple and easy to use,loved it
Swiper is so cool! :p