Fade in Fade out Slideshow with jQuery

Looking for a solution to build a simple slider? This Fade in Fade out slideshow is perfect for you. Its build with jQuery and CSS3 animation.

The plugin is well coded and easy to implement. It allows you to create a simple and lightweight slideshow that you can use to showcase the multiple images.

The slider comes with a nice fading effect which is perfect to show images and change them automatically. Furthermore, you can use this slider as a background as well.

In addition, this fading slider is fully responsive and compatible with all the latest web browsers.

How to Create Fade in Fade out Slideshow

To build the fad-in slider, you need to load jQuery/JavaScript library and include slideshow script into your page.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Slideshow Js -->
<script src="js/script.js"></script>

After that, you need to create an div element and place your first image in it. You don’t need to add all the images, just add the first one and the rest of the images need to add in the plugin configuration. I will guide you about this in the Javascript step.

Anyway, Let’s create a div with the class name gallery and place <img> tag.

<div class="gallery">
      <img src="./images/napoli-1.jpg">
</div>

The slider didn’t come with its own style because there is nothing to style in this slider. It doesn’t have any options like next or previous etc.

But in case if want to set its width and make it responsive, you need to add the following styles.

.slideshow{
   max-width: 720px;
   height: auto;
   margin: 0 auto;
}
.slideshow img{
   width: 80%;
   height: auto;
}

The Javascript

The final step to initialise the slider using the Javascript. The function will find the first image within the gallery container.

After that, you can add as many images as you want by defining the array.

<script>
$(document).ready(function(){
    var galleryImage = $('.gallery').find('img').first();
    var images = [
        'images/napoli-1.jpg',
        'images/napoli-2.jpg',
        'images/napoli-3.jpg',
        'images/napoli-4.jpg',
        'images/napoli-5.jpg',
        'images/napoli-6.jpg',
    ];

    var i = 0;
    setInterval(function() {
        i = (i + 1) % images.length;
        galleryImage.fadeOut(750, function(){
            $(this).attr('src', images[i]);
            $(this).fadeIn(750);
        })
    }, 5000);
})
</script>

That’s it. You are done.