Получение указателя текущего предмета в JCarousel

Я пытаюсь получить индекс текущего элемента в JCarousel, чтобы я мог отображать текущую позицию в карусели для пользователя. Например, '13/20 '.

Как я могу это сделать?

EDIT:

Образец конечного продукта:

Carousel Screenshot

ОТВЕТЫ

Ответ 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>

Ответ 2

Вы можете использовать:

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

Ответ 4

Это не кажется таким очевидным, как я надеялся, что плагин jQuery будет честным. Существует два обратных вызова itemVisibleInCallback и itemVisibleOutCallback, но они будут полезны только в том случае, если вы показываете только одно изображение за раз.

Честно говоря, насколько я ненавижу отправлять вам совершенно другой путь, я настоятельно рекомендую использовать плагин цикла для карусели, поскольку она позволяет намного, намного более тонкую настройку, которую я мог бы увидеть из моего быстрого просмотра jCarousel (извините jCarousel автор - сам код выглядит блестящим!).

Ответ 5

Я также обнаружил, что jCarousel возвращает непригодные .first,.last,.prevFirst и .prevLast свойства в то время, когда они вам нужны.

Следовательно, я должен был сделать это грязным способом и решил написать функцию, которая возвращает идентификатор того, какой тег li в настоящее время является первым в контейнере, путем чтения, будет ли это смещение слева выше нуля. Если это так, и это первый с левой позицией выше нуля, это мой текущий слайд.

В следующем коде предполагается, что вы положили id = "listitem-N" в теги списка в вашем цикле foreach(), где 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(), состоит в том, что каждая() является функцией, и возврат возвращается только для этой функции, а не getCurrentCarouselItem().

Ответ 6

Зависит от того, что вы хотите сделать, но здесь более "общий способ" сделать то же самое, вместо этого вы возвращаете сам объект, а не id:

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

Ответ 7

Вы можете подключиться к событию "jcarousel: animate" и захватить текущий слайд как объект jQuery.

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

Ответ 8

Если у вас есть разбиение на страницы (пули)

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

вы можете просто использовать:

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

jcarousel добавляет класс 'active' к активной марке, если у вас есть номера на пулях, которые вы просто извлекаете их методом .html()

Также вы можете повернуть их в целые числа по parseInt:

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

Ответ 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> для определения индекса текущего элемента.