DEV Community

Cover image for Easy Carousel Slider Tutorial using Swiper JS
Adrian Twarog
Adrian Twarog

Posted on

Easy Carousel Slider Tutorial using Swiper JS

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="">
<script src=""></script>

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            Slide 1
        <div class="swiper-slide">
            Slide 2
        <div class="swiper-slide">
            Slide 3

  var mySwiper = new Swiper ('.swiper-container')

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:

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)

texmeryt profile image
TexmerYT 🐍💛🖤

Amazing tutorial, but there is a way to make the first image random??

gilbishkosma profile image

I just used it, it's so simple and easy to use,loved it

vanaf1979 profile image
Stephan Nijman

Swiper is so cool! :p