Hi,
I'm currently making a jQuery carousel. This is my code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Conforming XHTML 1.0 Strict Template</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">
$(function()
{
$('div.showarea').fadeOut(0);
$('div.showarea:first').fadeIn(0);
$('a.leftarrow, a.rightarrow').click( function (ev) {
//prevent browser jumping to top
ev.preventDefault();
//get current visible item
var $visibleItem = $('div.showarea:visible');
//get total item count
var total = $('div.showarea').length;
//get index of current visible item
var index = $visibleItem.prevAll().length;
var end = $visibleItem.nextAll().length;
//if we click next increment current index, else decrease index
$(this).attr('href') === '#carouselNext' ? index++ : index--;
//if we are now past the beginning or end show the last or first item
if (index === -1){
index = total;
}
if (index === total) {
index = 0;
}
//hide current show item
$visibleItem.hide();
//fade in the relevant item
$('div.showarea:eq(' + index + ')').fadeIn(0);
});
});
</script>
<style>
img{width:400px;height:400px;}
</style>
</head>
<body>
<div class="maincarousel">
<div class="showarea">Hello, this is presentation number 1</div>
<div class="showarea">Another presentation</div>
<div class="showarea">Yeah, another presentation</div>
<br/>
<a href="#carouselPrev" class="leftarrow" title="Previous">Previous</a><br/>
<a href="#carouselNext" class="rightarrow" title="Next">Next</a>
</div>
</body>
</html>
It works. However I'm trying to get it so that when it hits the end of the presentation it'll stop rather than go back to the beginning.
Can anyone help me with this please?