Я пытаюсь получить индекс текущего элемента в JCarousel, чтобы я мог отображать текущую позицию внутри карусели пользователю. Например, «13/20».Получение указателя текущего элемента в JCarousel
Как я могу это сделать?
EDIT:
Образец конечного продукта:
Я думаю, что вы ищете 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>
Я нашел этот метод highlighting the jcarousel controller, который может содержать ответ.
Это не выглядит так очевидно, как я бы надеялся, что плагин jQuery будет честным. Существует два обратных вызова itemVisibleInCallback и itemVisibleOutCallback, но они будут полезны только в том случае, если вы показываете только одно изображение за раз.
Чтобы быть честным, насколько я ненавижу, чтобы отправить вам совершенно другой путь, я настоятельно рекомендую использовать cycle plugin для работы с каруселями, поскольку он позволяет гораздо более тонкую настройку, которую я мог бы увидеть из моего быстрого просмотра jCarousel (извините jCarousel автор - сам код выглядит блестящим!).
я тоже нашел, что jCarousel возвращает непригодный .Первый,. 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;
}
Причина не возвращать идентификатор в каждом(), потому что каждый() является функцией и возвращение будет возвращать только для этой функции, а не getCurrentCarouselItem().
Зависит от того, что вы хотите сделать, но здесь это более «общий путь», чтобы сделать то же самое, вместо того, что вы возвращаете сам объект и не является ID:
var currSlide = 0;
function getCurrentCarouselItem(){
$("ul#ulcol li.licol").each(function(){
if ($(this).offset().left >= 0){
currSlide = this;
return false;
}
});
return currSlide;
}
Вы можете использовать:
function trigger(carousel, state) {
index = carousel.index(carousel.last, size of list);
}
Вы можете подключиться к событию «jcarousel: animate» и захватить текущий слайд как объект jQuery.
$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
console.log(carousel._target); // this outputs your current slide as jQuery object.
});
Если у вас есть нумерации страниц (пули)
<p class="jcarousel-pagination"></p>
вы можете просто использовать:
var index = $('.active').html();
jcarousel добавляет класс 'активный' к активной пуле, если у вас есть номера на пули, вы просто извлекаете их методом .html()
Также вы можете превратить их в целые числа по parseInt:
var index = parseInt($('.active').html());
Если элементы в вашей карусели могут быть повторно заказаны, единственный надежный способ я нашел, чтобы получить индекс текущего элемента является:
$('#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> для определения индекса текущего элемента.
Я думал, что сначала, но первым и последним не работает, когда видно больше одного изображения, так как первое видимое изображение и последнее видимое изображение не всегда являются текущим изображением ... – Steerpike
Жаль, что я не полностью понимая, что вы говорите? Используя простой пример jcarousel, который использует три изображения и прокручивает по горизонтали, carousel.first вернет самый левый элемент, а carousel.last вернет самый правый элемент. При каждом нажатии левой и правой стрелок для выполнения следующей и предыдущей операций событие itemLoadCallback запускается, передавая данные карусели, позволяя вам проверять первый и последний элементы. И какой бы вы ни считали текущей, которую вы можете отобразить, если вы считаете середину текущей, используйте ее для определения среднего индекса. – HenryRat
Спасибо, это очень помогло. –