My first slideshow with jQuery is up and running, but it's very basic and hard coded. I want to add an automatic scrolling effect every 8 seconds to the next item before looping back to the beginning.
I have an idea on how to achieve this, but I want to follow best practices in my design
HTML:
<div id="slideWrap">
<div id="slides">
<ul id="slidePane">
<li><img src="css/images/slides/slide1.png" alt="img1" /></li>
<li><img src="css/images/slides/slide2.png" alt="img2" /></li>
<li><img src="css/images/slides/slide3.png" alt="img3" /></li>
<li><img src="css/images/slides/slide4.png" alt="img4" /></li>
</ul>
</div>
<div id="slideNav">
<ul>
<li class="active"><h2>Packages</h2></li>
<li><h2>Portfolio</h2></li>
<li><h2>Prices</h2></li>
<li><h2>About</h2></li>
</ul>
</div>
</div>
jQuery:
<script>
(function() {
var slider = $('#slides'),
imgWid = $('ul#slidePane img').width(),
imgHeight = -300,
imgs = 4,
imgsHeight = 3200;
$('#slideNav ul li').on('click', function() {
var listSel = $(this),
selImg = $('#slideNav li').index(this);
$(this).addClass('active');
$(this).siblings('li').removeClass('active');
slider.animate({
'margin-top': imgHeight * selImg
});
});
})();
</script>
- I'm looking for guidance on implementing a feature that allows for auto-scrolling through items vertically until user interaction stops it. *
Live Host:
If you need my CSS code, please let me know although I believe it may not be relevant to the question.