Получение индекса текущего элемента в JCarousel - PullRequest
Новая
       28

Получение индекса текущего элемента в JCarousel

12 голосов
/ 25 августа 2009

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

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

EDIT:

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

Carousel Screenshot

Ответы [ 11 ]

16 голосов
/ 25 августа 2009

Я думаю, что вы ищете, это 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 голосов
/ 27 мая 2012

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

function trigger(carousel, state) { 
    index = carousel.index(carousel.last, size of list);
}
1 голос
/ 27 октября 2014

Если у вас есть нумерация страниц (пули) 

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

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

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

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

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

var index = parseInt($('.active').html());
1 голос
/ 28 апреля 2014

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

$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
  console.log(carousel._target); // this outputs your current slide as jQuery object.
});
1 голос
/ 07 декабря 2010

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

var currSlide = 0;
    function getCurrentCarouselItem(){
      $("ul#ulcol li.licol").each(function(){
        if ($(this).offset().left >= 0){
            currSlide = this;
            return false;
        }
      });
    return currSlide;
    }
1 голос
/ 14 ноября 2010

Я также обнаружил, что 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 (), заключается в том, что each () - это функция, и возврат будет возвращаться только для этой функции, а не getCurrentCarouselItem ().

1 голос
/ 25 августа 2009

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

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

1 голос
/ 25 августа 2009

Я нашел этот метод , подсвечивающий контроллер jcarousel , который может содержать ответ.

0 голосов
/ 30 июля 2018 
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>
0 голосов
/ 14 мая 2018

Другое решение, получающее текущий индекс элемента с помощью 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');
    }
});
Страница:
...