Simple photo slider
This is a simple photo slider I coded from scratch as a way to begin working with jQuery in more detail.
HTML
<div id="slideshow">
<figure id="slideshowMainAttraction">
<img src="http://placehold.it/240x320&text=Photo1" alt="480*640" />
<figcaption>Caption</figcaption>
<a class="slideshowBack"><</a>
<a class="slideshowForward">></a>
</figure>
<ul id="slideshowImages">
<li><img src="http://placehold.it/240x320&text=1"></li>
<li><img src="http://placehold.it/240x320&text=2"></li>
<li><img src="http://placehold.it/240x320&text=3"></li>
<li><img src="http://placehold.it/240x320&text=4"></li>
<li><img src="http://placehold.it/240x320&text=5"></li>
</ul>
</div>
CSS
#slideshowImages { display: none; }
#slideshowMainAttraction { display: block; position: relative;}
a.slideshowBack, a.slideshowForward { font-size: 24px; font-weight: bold; color: white; background-color: black;}
a.slideshowBack { position: absolute; display: block; top: 40%; left: -10px;}
a.slideshowForward { position: absolute; display: block; top:40%; left: 230px;}
JavaScript
var list = $('#slideshowImages li');
var currentItem = 0;
function changeToSlide(index) {
var i = index;
var nextImage = $('#slideshowImages img' + ':eq(' + i +')').attr('src');
var nextText = $('#slideshowImages li' + ':eq(' + i + ')').text();
$('#slideshowMainAttraction img').attr('src', nextImage);
$('#slideshowMainAttraction figcaption').text(nextText);
}
$('.slideshowForward').click(function() {
var i = currentItem;
if ( i < (list.length - 1)){
changeToSlide(i+1);
currentItem += 1;
} else {
changeToSlide(0);
currentItem = 0;
}
});
$('.slideshowBack').click(function() {
var i = currentItem;
if (i === 0) {
currentItem = list.length - 1;
changeToSlide(currentItem);
}else {
currentItem -= 1;
changeToSlide(currentItem);
}
});
changeToSlide(0);