I've been struggling with a problem for a while and I'm trying to find a solution. Here's the link to my slideshow:
http://jsfiddle.net/Jtec5/33/Here are the CSS codes:
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
#slideshow img {
max-width:240px;
max-height:240px;
}
ul {
list-style:none;
margin:0px;
padding:0px;
}
ul li {
float:left;
border-radius:10px;
width:10px;
height:10px;
border:1px solid white;
background:grey;
}
ul li.active {
background:black;
}
And here is the HTML code:
<div id="slideshow">
<div>
<img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg" />
</div>
<div>
<img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg" />
</div>
<div>
<img src="http://gillespaquette.ca/images/stack-icon.png" />
</div>
</div>
<ul></ul>
Lastly, the Jquery code:
$("#slideshow > div:gt(0)").hide();
var maxindex = $('#slideshow > div').length;
var index = 0
var interval = 3 * 1000; // 3 seconds
var timerJob = setInterval(traverseSlideShow, interval);
function traverseSlideShow() {
console.log("current index: " + index);
$('#slideshow > div')
.stop()
.fadeOut(1000);
$('#slideshow > div').eq(index)
.stop()
.fadeIn(1000);
$('ul li').removeClass('active');
$('ul li:eq(' + index + ')').addClass('active');
index = (index < maxindex - 1) ? index + 1 : 0;
}
for (var i = 0; i < maxindex; i++) {
$('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}
$(document).on('click', 'ul li', function () {
index = $(this).index();
traverseSlideShow();
clearInterval(timerJob);
timerJob = setInterval(traverseSlideShow, interval);
});
The issue I'm facing is with the circle buttons within the slideshow (<ul>). If you click on these buttons multiple times, you may notice a brief pause in the image transitions. Each additional click causes a short delay in the photo appearing.