Easy Carousel Slider Tutorial using Swiper JS

#webdev #beginners #html #tutorial

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.

Youtube: Swiper JS Tutorial

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/