Simple Fade Slideshow

Simple Fade Slideshow

A simple jQuery based Slideshow with fade effect.

HTML:

<ul class="slider">
<li>
<img src="http://paulmason.name/media/demos/jquery-slider/580x250-1.jpg" />
</li>
<li>
<img src="http://paulmason.name/media/demos/jquery-slider/580x250-3.jpg" />
</li>
<li>
<img src="http://paulmason.name/media/demos/jquery-slider/580x250-2.jpg" />
</li>
<li>
<img src="http://paulmason.name/media/demos/jquery-slider/580x250-3.jpg" />
</li>
</ul>

CSS:

.slider {
margin: 10px 0;
width: 580px; /* Update to your slider width */
height: 250px; /* Update to your slider height */
position: relative;
overflow: hidden;
}

.slider li {
display: none;
position: absolute;
top: 0;
left: 0;
}

jQuery:

<script src="https://code.jquery.com/jquery.js"></script>
<script>
jQuery(function($) {

// settings
var $slider = $('.slider'); // class or id of carousel slider
var $slide = 'li'; // could also use 'img' if you're not using a ul
var $transition_time = 1000; // 1 second
var $time_between_slides = 4000; // 4 seconds

function slides(){
return $slider.find($slide);
}

slides().fadeOut();

// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);

// auto scroll
$interval = setInterval(
function(){
var $i = $slider.find($slide + '.active').index();

slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);

if (slides().length == $i + 1) $i = -1; // loop to start

slides().eq($i + 1).fadeIn($transition_time);
slides().eq($i + 1).addClass('active');
}
, $transition_time + $time_between_slides
);

});
</script>

DemoDownload

You may also like