Получение индекса текущего элемента в JCarousel [javascript, jquery, jcarousel]

arrow_upward
16
arrow_downward

Я думаю, что вы ищете 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>

HenryRat 25.08.2009

comment

Я думал, что сначала, но первое и последнее не работают, когда более одного изображения видно как первое видимое изображение, а последнее видимое изображение не всегда является текущим изображением... - Steerpike; 25.08.2009

comment

Извините, я не совсем понимаю, что вы говорите? Используя простой пример jcarousel, в котором используются три изображения и прокручивается по горизонтали, carousel.first вернет самый левый элемент, а carousel.last вернет самый правый элемент. При каждом нажатии стрелок влево и вправо для выполнения следующей и предыдущей операций запускается событие itemLoadCallback, передающее данные карусели, что позволяет проверить первый и последний элементы. И независимо от того, что вы считаете текущим, вы можете отобразить, если вы считаете середину текущей, используйте их для определения среднего индекса. - HenryRat; 25.08.2009

comment

Спасибо... очень помогло. - Anthony Walsh; 05.09.2009

arrow_upward
2
arrow_downward

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

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

patrick 26.05.2012

arrow_upward
1
arrow_downward

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

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

Steerpike 25.08.2009

arrow_upward
1
arrow_downward

Я тоже обнаружил, что 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().

jorisw 14.11.2010

arrow_upward
1
arrow_downward

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

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

poupougnac 07.12.2010

arrow_upward
1
arrow_downward

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

jjclarkson 25.08.2009

arrow_upward
1
arrow_downward

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

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

Mark Williams 28.04.2014

arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

Jan Pi 27.10.2014

arrow_upward
0
arrow_downward

Если элементы в вашей карусели можно переупорядочить, единственный надежный способ, который я нашел, чтобы получить индекс текущего элемента:

$('#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')).

Однако, как только вы начнете переупорядочивать элементы в карусели, это событие перестанет быть полезным, а число в идентификаторе теперь будет вводить в заблуждение. Итак, нам нужно использовать позицию <li> в <ul> для определения индекса текущего элемента.

Daniel Flippance 31.05.2016

arrow_upward
0
arrow_downward

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

Ben 14.05.2018

arrow_upward
0
arrow_downward

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>

Vladimir Miroshnichenko 30.07.2018

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

Ответы (11)

Похожие вопросы