Getting Index of Current Item in JCarousel

2019-03-15 11:04发布

站内文章 / JavaScript

12 0

叛逆

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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:

回答1:

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>

回答2:

You can use:

function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list);
}

回答3:

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!).

回答4:

I too have found that jCarousel returns unusable .first, .last, .prevFirst and .prevLast properties at the times that you need them.

Hence, I had to do it the dirty way and decided to write a function that returns the ID of whichever li tag is currently the first in the container, by reading whether or not it's left-offset is above zero. If so, and it's the first one with an above-zero left position, it's my current slide.

The following code assumes that you've put an id="listitem-N" in the list tags in your foreach() loop, where N is the current iteration.

var currSlide = 0;

function getCurrentCarouselItem(){

    $("ul#use-cases li.use-case").each(function(){

        var leftPos = $(this).offset().left;

        if( leftPos >= 0){

            var id = $(this).attr('id').split("-");

            currSlide =  id[1];

            return false;

        }

    });

    return currSlide;

}

The reason I don't return the id in the each() is because each() is a function and the return will only return for that function, not getCurrentCarouselItem().

回答5:

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

回答6:

I found this method of highlighting the jcarousel controller that may contain the answer.

回答7:

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

回答8:

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

回答9:

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.

回答10:

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

回答11:

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>