Creating awesome carousels with SWIPER JS

#webdev #javascript

Creating carousels for a website can be a complicated and stressful process. Well, this problem can be solved using SWIPER JS
Swiper is a cool and easy to use JavaScript Library.
It is a modern touch slider which is focused only on modern apps and web platforms to bring the best experience and simplicity. The documentation is very easy to understand.

Steps in creating a carousel with Swiper JS

Getting Started

Using CDN

<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

Using NPM

from the terminal
$ npm install swiper

HTML Layout

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Intialize Swiper Js

new Swiper(swiperContainer, parameters)

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

Here are some demos of carousel

Simple

Pagination

Scrollbar

Vertical Slider

Fade Effect

3D Cube Effect

3D Coverflow Effect

3D Flip Effect

Thumbs Gallery

Lazy Loading

For more Demos, check HERE

Credits

If you have any other questions you can send me a message on Twitter

Thanks 😊

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide