Easy Carousel Slider Tutorial using Swiper JS

Adrian Twarog - Apr 25 '20 - - Dev Community

Swiper Js is a cool little library that allows us to make carousel sliders in 3 minutes or less.

Swiper JS Carousel Slider Tutorial
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

Swiper JS Carousel Slider Example

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:

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .