Simple photo slider

This is a simple photo slider I coded from scratch as a way to begin working with jQuery in more detail.

by secretgspot

HTML

<div id="slideshow">
    <figure id="slideshowMainAttraction">
        <img src="http://placehold.it/240x320&text=Photo1" alt="480*640" />
        <figcaption>Caption</figcaption>
        <a class="slideshowBack">&lt;</a>
        <a class="slideshowForward">&gt;</a>
    </figure>

    <ul id="slideshowImages">
        <li><img src="http://placehold.it/240x320&text=1">Caption 1</li>
        <li><img src="http://placehold.it/240x320&text=2">Caption 2</li>
        <li><img src="http://placehold.it/240x320&text=3">Caption 3</li>
        <li><img src="http://placehold.it/240x320&text=4">Caption 4</li>
        <li><img src="http://placehold.it/240x320&text=5">Caption 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;}
figcaption {
    display: block; 
    position: absolute; 
    bottom: 10px; 
    left: -10px;
    background-color: #add; 
    width: 250px;
    padding: 3px 5px;
}

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);