Getting Index of Current Item in JCarousel

2019-03-15 10:53发布

站内问答 / JavaScript
443 11 4

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:

Carousel Screenshot

11条回答
小情绪 Triste *
2楼-- · 2019-03-15 11:51

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>
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
3楼-- · 2019-03-15 11:51

If you have pagination (bullets)

<p class="jcarousel-pagination"></p>

you can simply use:

var index = $('.active').html();

jcarousel is adding class 'active' to active bullet, if you have numbers on the bullets you just retrieve them by .html() method

Also you can turn them to integers by parseInt:

var index = parseInt($('.active').html());
查看更多
0人赞 添加讨论(0) 举报
戒情不戒烟
4楼-- · 2019-03-15 11:52

You can hook into the 'jcarousel:animate' event, and grab the current slide as a jQuery Object.

$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
  console.log(carousel._target); // this outputs your current slide as jQuery object.
});
查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
5楼-- · 2019-03-15 11:53

It doesn't seem as obvious as I would have hoped from a jQuery plugin to be honest. There are two callbacks itemVisibleInCallback and itemVisibleOutCallback, but they're only going to be useful if you're only displaying one image at a time.

To be honest, as much as I hate to send you down a totally different path, I would highly recommend using the cycle plugin for carousel work as it allows much, much finer customisation that would I could see from my quick look through the jCarousel (sorry jCarousel author - the code itself looks brilliant!).

查看更多
0人赞 添加讨论(0) 举报
走好不送
6楼-- · 2019-03-15 11:59

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');
    }
});
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)