Question

我试图获取JCarousel中当前项目的索引，以便我可以在Carousel中向用户显示当前位置。例如，'13 / 20'。

我该怎么做？

修改

最终产品样本：

Carousel Screenshot

Answer 1

我认为你要找的是carousel.first，它将为你提供第一个可见元素的索引（还有carousel.last来显示最后一个可见元素）。

以下是一个使用示例，基于简单的轮播示例，添加了carousel.first变量和itemLoadCallback事件：

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

Answer 2

您可以使用：

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

Answer 3

我发现highlighting the jcarousel controller的这种方法可能包含答案。

Answer 4

从诚实的jQuery插件看起来并不像我希望的那样明显。有两个回调itemVisibleInCallback和itemVisibleOutCallback，但如果您一次只显示一个图像，它们将会非常有用。

老实说，尽管我不想让你走上一条完全不同的道路，但我强烈建议你使用cycle plugin进行轮播工作，因为它可以让我从我的身上看到更多更精细的定制。快速浏览jCarousel（对不起jCarousel作者 - 代码本身看起来很棒！）。

Answer 5

我也发现jCarousel在您需要的时候返回不可用的.first，.last，.prevFirst和.prevLast属性。

因此，我必须以脏方式完成它并决定编写一个函数，通过读取它的左偏移量是否大于零，返回容器中当前第一个li标签的ID。如果是这样，并且它是第一个左上位置为零的，那就是我当前的幻灯片。

以下代码假设您在foreach（）循环中的list标记中放置了id =“listitem-N”，其中N是当前迭代。

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;

}

我没有在each（）中返回id的原因是因为each（）是一个函数，返回只返回该函数，而不是getCurrentCarouselItem（）。

Answer 6

取决于你想做什么，但这里有一个更“通用的方法”来做同样的事情，而不是你返回对象本身而不是id：

var currSlide = 0;
    function getCurrentCarouselItem(){
      $("ul#ulcol li.licol").each(function(){
        if ($(this).offset().left >= 0){
            currSlide = this;
            return false;
        }
      });
    return currSlide;
    }

Answer 7

你可以加入＆＃39; jcarousel：animate＆＃39; event，并将当前幻灯片作为jQuery对象获取。

$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
  console.log(carousel._target); // this outputs your current slide as jQuery object.
});

Answer 8

如果你有分页（子弹）

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

你可以简单地使用：

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

jcarousel正在添加课程＆＃39; active＆＃39;对于活跃的子弹，如果子弹上有数字，则只需通过.html（）方法

检索它们

您也可以通过parseInt将它们转换为整数：

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

Answer 9

如果您的转盘中的商品可以重新订购，我找到的获得当前商品索引的唯一可靠方式是：

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

这就是原因。

您会注意到轮播中每件商品的this.id类似于image-1，其中1是订单更改前转盘中商品的原始索引。该索引似乎是使用jcarousel:animateend事件并调用carousel.index($(this).jcarousel('first'))可检索的内容。

但是，一旦您开始重新排序轮播中的项目，该事件就不再有用，并且ID中的数字现在具有误导性。因此，我们需要使用<li>中<ul>的位置来确定当前项的索引。

Answer 10

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

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

您可以使用任意数量的属性来标识其中的幻灯片和数据

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

获取JCarousel中当前项的索引

11 个答案: