DEV Community

loading...
Cover image for Easy Carousel Slider Tutorial using Swiper JS

Easy Carousel Slider Tutorial using Swiper JS

adriantwarog profile image Adrian Twarog ・2 min read

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:

Discussion (3)

pic
Editor guide
Collapse
texmeryt profile image
TexmerYT 🐍💛🖤

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

Collapse
gilbishkosma profile image
Gilbish

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

Collapse
vanaf1979 profile image
Stephan Nijman

Swiper is so cool! :p