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)
I just used it, it's so simple and easy to use,loved it
Swiper is so cool! :p
Amazing tutorial, but there is a way to make the first image random??