Fade in Fade out Slideshow with jQuery

A simple, lightweight and easy to use fade in fade out image slideshow created with CSS and jQuery. This mini plugin will helps you to create a basic fading image slider for your web projects. It uses jQuery built-in fading functions to make a really simple slideshow.

Plugin Overview

Plugin: Fading Image Gallery
Author: Antonio Monda
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS, Images & JavaScript )
Package Size: 913 KB

How to Create Fade in / out Image Slideshow

1. Create a div element in HTML and place your first image in it.

   <div class="slideshow">
        <img src="path/to/image.jpg">

2. Now add some CSS styles to make your slideshow images responsive.

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

3. After that, 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>

4. Insert the path of your images in plugin images array.

    var images = [

5. If you want to run slideshow script inline, add the following script in your HTML page to finalize jQuery fade in fade out slideshow.

    var galleryImage = $('.gallery').find('img').first();
    var images = [

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

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link