[Swiper]How to create fade slider

In this article, I am going to describe about how to create fade slider with smooth transitions using effect option of swiper.js.

I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper] How to create a simple slider with swiper.js

Table of Contents

①Create a normal swiper slider
②Apply the fade effect
③Resolve the overlapping of the slides
The full text of source code

①Create a normal swiper slider

To make it clear, we will create normal swiper slider first and then make changes.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:50%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,                         // loop
        autoplay: {                         // auto play
            delay: 2000,
        },
        pagination: {                       // pagination(dots)
            el: '.swiper-pagination',
        },
        navigation: {                       // navigation(arrows)
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

Now we can see normal slider.

②Apply the fade effect

We can apply the fade effect by adding effect: ‘fade’ as below.
Also, to make the movements more apparent, we will set the slide speed slightly slower.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    speed: 1500,            // added(slide speed)
    effect: 'fade',         // added(apply fade effect)
    autoplay: {
        delay: 2000,
    },
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

③Resolve the overlapping of the slides

When using the fade effect with images of different sizes, overlapping of slides may occur. To resolve this overlap, you can specify crossFade: true within the fadeEffect option.

const swiper = new Swiper('.sample-slider', {
    loop: true,
    speed: 1500,
    effect: 'fade',
    fadeEffect: {           // added
        crossFade: true     // added(resolve the overlapping of the slides)
    },                      // added
    autoplay: {
        delay: 2000,
    },
    pagination: {
        el: '.swiper-pagination',
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
})

The full text of source code

In the end, I put the full text of source code.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>

<style>
    .sample-slider{
        width:50%;
    }
    .sample-slider img{
        width: 100%;
    }
</style>

<div class="swiper sample-slider">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="./img/sample1.png"></div>
        <div class="swiper-slide"><img src="./img/sample2.png"></div>
        <div class="swiper-slide"><img src="./img/sample3.png"></div>
        <div class="swiper-slide"><img src="./img/sample4.png"></div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script>
    const swiper = new Swiper('.sample-slider', {
        loop: true,
        speed: 1500,
        effect: 'fade',         // apply fade effect
        fadeEffect: {           
            crossFade: true     // resolve the overlapping of the slides
        },
        autoplay: {
            delay: 2000,
        },
        pagination: {
            el: '.swiper-pagination',
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    })
</script>

That is all, it was about how to create fade slider with swiper.js.

There are the other sliders which can be made by effect option.
[Swiper]How to create cube slider
[Swiper]How to create card slider
[Swiper]How to create coverflow slider
[Swiper]How to create flip slider
[Swiper]How to create original slider using creativeEffect

If you are interested in how various slider can be made by swiper.js, please refer below article!
Swiper Demo 22 Slider