Menu
I am attempting to get the index of the current item in a JCarousel so that I can display the current position within the Carousel to the user. For example, '13/20'.
How can I do this?
EDIT:
Sample of the end product:
928
Another solution getting the current index of the item with jquery...
//jcarousel item becomes visible
$('.jcarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
// "this" refers to the item element
itemCount = $(".jcarousel li").length; //1 based
currentIndex = ($( "li" ).index($(this))); //0 based
if(currentIndex + 1 == itemCount) {
alert('last');
}
if(currentIndex == 0) {
alert('first');
}
});
I think what you are looking for is carousel.first, which will give you the index of the first visible element (there is also carousel.last to show the last visible element).
Here is an example of it's use, based on the simple carousel example with the addition of the carousel.first variable and itemLoadCallback event:
<script type="text/javascript">
$(document).ready(function() {
$('#mycarousel').jcarousel({
itemLoadCallback: trigger
});
});
function trigger(carousel, state)
{
$("#currentImg").html(carousel.first);
}
</script>
</head>
<body>
<div id="wrap">
<h1>jCarousel</h1>
<h2>Riding carousels with jQuery</h2>
<h3>Simple carousel</h3>
<p>
This is the most simple usage of the carousel with no configuration options.
</p>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
Current Photo <span id="currentImg">1</span>
</div>
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
