发表新帖
发表新帖

Getting Index of Current Item in JCarousel

前端 未结
关注
11 1700
夕颜
夕颜 2021-02-05 20:25

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\'.

H

相关标签:
11条回答
  • 醉酒成梦
    2021-02-05 20:40 
    var jcarousel = $('.jcarousel').on('jcarousel:createend', function(event, carousel) {
                  do_something_with_current_slide(carousel); //in case if you need current slide on the begining
              })
              .on('jcarousel:animateend', function(event, carousel) {
                  do_something_with_current_slide(carousel); //do something with current slide right after animation ends
              })
              .jcarousel({
                    wrap: 'circular'                    
              });

function do_something_with_current_slide(carousel){
    li = carousel._target;  //li of current slide
    alert(li.attr('slide')); 
}

    you can use any number of attributes to indentify slide and data inside

    <ul id="mycarousel" class="jcarousel-skin-tango">
    <li slide="1" currency="EUR"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75"/></li>
    <li slide="2" currency="USD"><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75"/></li>
    <li slide="3" currency="UAH"><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75"/></li>
</ul>
    0 讨论(0)
  • 情话喂你
    2021-02-05 20:44

    Depends of what you want to do but here is a more "generic way" to do the same, instead that you return the object itself and not is id:

    var currSlide = 0;
    function getCurrentCarouselItem(){
      $("ul#ulcol li.licol").each(function(){
        if ($(this).offset().left >= 0){
            currSlide = this;
            return false;
        }
      });
    return currSlide;
    }
    0 讨论(0)
  • 天涯浪人
    2021-02-05 20:46

    You can use:

    function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list);
}
    0 讨论(0)
  • 鱼传尺愫
    2021-02-05 20:50

    If the items in your carousel can be re-ordered, the only reliable way I've found to get the index of the current item is:

    $('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
    var index = $('#'+this.id).index();
    console.log('++ index: %s', index);
});

    Here's why.

    You'll notice that this.id of each item in the carousel is something like image-1 where 1 is the original index of the item in the carousel before its order was changed. That index appears to be what is retrievable using the jcarousel:animateend event and calling carousel.index($(this).jcarousel('first')).

    However, once you start reordering the items in the carousel, that event is no longer helpful, and the number in the id is now misleading. So, we need to use the position of the <li> in the <ul> to determine index of the current item.

    0 讨论(0)
  • 孤城傲影
    2021-02-05 20:53

    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)
  • 春和景丽
    2021-02-05 20:54

    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)
 看不清?
提交回复
热议问题