I have successfully developed a fadein/fadeout slider that automatically transitions between images. However, I am now looking to implement the functionality to manually play the slider by clicking on next/prev buttons.
HTML
<section class="wrapper">
<ul class="slider">
<li><img src="http://www.tylershields.com/images/gallery/art_gallery.jpg" alt="" /></li>
<li><img src="http://www.goa-tourism.com/images/photogallery/1287634889_pid_kala%20academy%20art%20gallery.jpg" alt="" /></li>
<li><img src="http://www.magnoliabakery.com/uploads/GalleryImageModel/105/filemask/mag1003_magnolia_fall_14original.gallery.jpg" alt="" /></li>
<li><img src="http://www.lancasterconventioncenter.com/_images/_gallery/gallery15.jpg" alt="" /></li>
</ul>
<button data-dir="prev">Prev</button>
<button data-dir="next">Next</button>
</section>
CSS
* {margin:0; padding:0;}
.wrapper {width:800px; margin:0 auto; max-width:100%;}
.slider {position:relative;}
.slider li {position:absolute; top:0; left:0; list-style:none; width:100%; opacity:0;}
.slider li img {width:100%;}
.slider li:first-child {position:relative; display:block; opacity:1;}
Script
var current = 0,
elem = $('.slider li'),
slides = $('.slider li').length,
speed = 3000,
transSpeed = 1000;
function autoSlide(){
current = (current == (slides-1)) ? 0 : +1;
$('.slider').find('li')
.filter(':eq('+ current +')').addClass('current').animate({'opacity':1}, transSpeed)
.siblings('li').removeClass('current').animate({'opacity':0}, transSpeed);
};
var timer = setInterval(autoSlide, speed);
$('button').on('click', function(){
clearInterval(timer);
autoSlide();
timer =setInterval(autoSlide, speed);
});