Tôi đang cố gắng lấy chỉ mục của mục hiện tại trong một JCarousel để tôi có thể hiển thị vị trí hiện tại trong Carousel cho người dùng. Ví dụ: '13/20 '.Lấy chỉ mục của mục hiện tại trong JCarousel
Làm thế nào tôi có thể làm điều này?
EDIT:
mẫu của sản phẩm cuối cùng:
Tôi nghĩ rằng những gì bạn đang tìm kiếm là carousel.first, sẽ cung cấp cho bạn chỉ mục của phần tử hiển thị đầu tiên (cũng có carousel.last để hiển thị phần tử hiển thị cuối cùng).
Dưới đây là một ví dụ của nó là sử dụng, dựa trên ví dụ băng chuyền đơn giản với việc bổ sung các biến carousel.first và sự kiện 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>
tôi thấy phương pháp này highlighting the jcarousel controller có thể chứa câu trả lời.
Dường như không rõ ràng như tôi đã hy vọng từ một plugin jQuery thành thật. Có hai callbacks itemVisibleInCallback và itemVisibleOutCallback, nhưng chúng sẽ chỉ hữu ích nếu bạn chỉ hiển thị một hình ảnh tại một thời điểm.
Thành thật mà nói, tôi ghét phải gửi cho bạn một con đường hoàn toàn khác, tôi khuyên bạn nên sử dụng cycle plugin để làm việc băng chuyền vì nó cho phép tùy chỉnh tốt hơn nhiều. jCarousel (tác giả jCarousel xin lỗi - chính mã nguồn sẽ xuất sắc!).
tôi cũng đã phát hiện ra rằng jCarousel trả .first không sử dụng được,. các thuộc tính last, .prevFirst và .prevLast tại thời điểm bạn cần chúng.
Do đó, tôi phải thực hiện theo cách bẩn và quyết định viết một hàm trả về ID của bất kỳ thẻ li nào hiện là người đầu tiên trong vùng chứa, bằng cách đọc có hay không. Nếu vậy, và đó là cái đầu tiên có vị trí bên trái trên không, đó là trang trình bày hiện tại của tôi.
Đoạn mã sau giả định rằng bạn đã đặt id = "listitem-N" trong thẻ danh sách trong vòng lặp foreach() của bạn, trong đó N là lần lặp hiện tại.
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;
}
Lý do tôi không trả lại id trong mỗi() là vì mỗi() là hàm và trả về sẽ chỉ trả về hàm đó, chứ không phải getCurrentCarouselItem().
phụ thuộc vào những gì bạn muốn làm nhưng đây là một "cách chung chung" hơn để làm như vậy, thay vào đó bạn trả lại đối tượng chính nó và không phải là id:
var currSlide = 0;
function getCurrentCarouselItem(){
$("ul#ulcol li.licol").each(function(){
if ($(this).offset().left >= 0){
currSlide = this;
return false;
}
});
return currSlide;
}
Bạn có thể sử dụng:
function trigger(carousel, state) {
index = carousel.index(carousel.last, size of list);
}
Bạn có thể móc vào sự kiện 'jcarousel: animate' và lấy trang trình bày hiện tại làm đối tượng jQuery.
$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
console.log(carousel._target); // this outputs your current slide as jQuery object.
});
Nếu bạn có pagination (đạn)
<p class="jcarousel-pagination"></p>
bạn chỉ có thể sử dụng:
var index = $('.active').html();
jCarousel là thêm lớp 'hoạt động' để đạn hoạt động, nếu bạn có con số trên đạn bạn chỉ cần truy xuất chúng theo phương thức .html()
Ngoài ra, bạn có thể biến chúng thành số nguyên theo parseInt:
var index = parseInt($('.active').html());
Nếu các mục trong băng chuyền của bạn có thể được tái đặt hàng, cách duy nhất đáng tin cậy tôi đã tìm thấy để có được những chỉ số của mặt hàng đó hiện nay là:
$('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
var index = $('#'+this.id).index();
console.log('++ index: %s', index);
});
Dưới đây là lý do tại sao.
Bạn sẽ nhận thấy rằng this.id của mỗi mục trong băng chuyền là một cái gì đó như image-1 trong đó 1 là chỉ mục ban đầu của mục trong băng chuyền trước khi đơn đặt hàng của nó được thay đổi. Chỉ mục đó dường như là những gì có thể truy xuất được bằng sự kiện jcarousel:animateend và gọi số carousel.index($(this).jcarousel('first')).
Tuy nhiên, khi bạn bắt đầu sắp xếp lại các mục trong băng chuyền, sự kiện đó không còn hữu ích nữa và số trong id giờ đây gây hiểu nhầm. Vì vậy, chúng ta cần sử dụng vị trí của <li> trong số <ul> để xác định chỉ mục của mục hiện tại.
Tôi nghĩ rằng lúc đầu, nhưng trước tiên và cuối cùng không hoạt động khi có nhiều hình ảnh hiển thị dưới dạng hình ảnh hiển thị đầu tiên và hình ảnh hiển thị cuối cùng không phải lúc nào cũng là hình ảnh hiện tại ... – Steerpike
Xin lỗi, tôi không hoàn toàn hiểu những gì bạn đang nói? Sử dụng ví dụ đơn giản của jcarousel, sử dụng ba hình ảnh và cuộn theo chiều ngang, carousel.first sẽ trả về phần tử ngoài cùng bên trái và carousel.last sẽ trả về phần tử ngoài cùng bên phải. Trên mỗi lần nhấn mũi tên trái và phải để thực hiện các thao tác tiếp theo và trước đó, sự kiện itemLoadCallback được kích hoạt truyền dữ liệu băng chuyền cho phép bạn kiểm tra các phần tử đầu tiên và cuối cùng. Và bất cứ cái gì bạn cho là hiện tại bạn có thể hiển thị, nếu bạn xem xét giữa là hiện tại thì hãy sử dụng chúng để xác định chỉ số trung bình. – HenryRat
Cảm ơn bạn ... điều này đã giúp ích rất nhiều. –