Sto tentando di ottenere l'indice dell'articolo corrente in un JCarousel in modo che sia possibile visualizzare la posizione corrente all'interno del Carousel per l'utente. Ad esempio, '13/20 '.Ottenere l'indice dell'articolo corrente in JCarousel
Come posso fare questo?
EDIT:
Campione del prodotto finale:
Penso che quello che stai cercando sia carousel.first, che ti darà l'indice del primo elemento visibile (c'è anche carousel.last per mostrare l'ultimo elemento visibile).
Ecco un esempio del suo utilizzo, sulla base del semplice esempio giostra con l'aggiunta della variabile carousel.first e l'evento 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>
ho trovato questo metodo di highlighting the jcarousel controller che può contenere la risposta.
Non sembra ovvio come avrei sperato da un plugin jQuery per essere onesto. Esistono due callback itemVisibleInCallback e itemVisibleOutCallback, ma saranno utili solo se visualizzi solo un'immagine alla volta.
Per essere onesti, per quanto detesti inviarti un percorso completamente diverso, ti consiglio vivamente di utilizzare lo cycle plugin per il carosello perché consente una personalizzazione molto più accurata che avrei potuto vedere dal mio rapido sguardo attraverso il jCarousel (scusate l'autore di jCarousel - il codice stesso sembra geniale!).
anch'io ho scoperto che jCarousel ritorna .first inutilizzabile,. last, .prevFirst e .prevLast properties nel momento in cui ne hai bisogno.
Quindi, ho dovuto farlo in modo sporco e ho deciso di scrivere una funzione che restituisce l'ID di qualsiasi tag LI al momento è il primo nel contenitore, leggendo se l'offset a sinistra è o meno sopra lo zero. Se è così, ed è il primo con una posizione di sinistra sopra lo zero, è la mia diapositiva corrente.
Il seguente codice presuppone che sia stato inserito un id = "listitem-N" nei tag elenco nel ciclo foreach(), dove N è l'iterazione corrente.
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;
}
Il motivo non torno l'id in ciascun() perché ogni() è una funzione e il ritorno restituirà solo per tale funzione, non getCurrentCarouselItem().
Dipende di che cosa si vuole fare, ma qui è un "modo generico" più a che fare lo stesso, invece che ritorni l'oggetto stesso e non è l'ID:
var currSlide = 0;
function getCurrentCarouselItem(){
$("ul#ulcol li.licol").each(function(){
if ($(this).offset().left >= 0){
currSlide = this;
return false;
}
});
return currSlide;
}
È possibile utilizzare:
function trigger(carousel, state) {
index = carousel.index(carousel.last, size of list);
}
È possibile collegare l'evento 'jcarousel: animate' e acquisire la diapositiva corrente come un oggetto jQuery.
$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
console.log(carousel._target); // this outputs your current slide as jQuery object.
});
Se si dispone di impaginazione (proiettili)
<p class="jcarousel-pagination"></p>
si può semplicemente utilizzare:
var index = $('.active').html();
jCarousel è l'aggiunta di classe 'attiva' di proiettile attiva, se avete i numeri sulla i proiettili li recuperate semplicemente con il metodo .html()
Inoltre è possibile trasformarli in numeri interi da parseInt:
var index = parseInt($('.active').html());
Se gli articoli nel carosello possono essere ri-ordinato, l'unico modo affidabile che ho trovato per ottenere l'indice della voce corrente è:
$('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
var index = $('#'+this.id).index();
console.log('++ index: %s', index);
});
è qui per questo.
Si noterà che this.id di ciascun elemento nel carousel è qualcosa come image-1 dove 1 è l'indice originale dell'elemento nel carosello prima che il suo ordine fosse cambiato. Tale indice sembra essere recuperabile utilizzando l'evento jcarousel:animateend e chiamando carousel.index($(this).jcarousel('first')).
Tuttavia, una volta iniziato a riordinare gli articoli nel carosello, tale evento non è più utile e il numero nell'ID è ora fuorviante. Pertanto, dobbiamo utilizzare la posizione dello <li> nello <ul> per determinare l'indice dell'elemento corrente.
Ho pensato che all'inizio, ma prima e l'ultima non funzionano quando più di un'immagine è visibile come la prima immagine visibile e l'ultima immagine visibile non è sempre l'immagine corrente ... – Steerpike
Scusa non sono comprendendo pienamente quello che stai dicendo? Usando l'esempio semplice di jcarousel, che usa tre immagini e scorre orizzontalmente, carousel.first restituirà l'elemento più a sinistra e carousel.last restituirà l'elemento più a destra. Ad ogni pressione delle frecce sinistra e destra per eseguire le operazioni successive e precedenti, l'evento itemLoadCallback viene attivato passando i dati del carosello consentendo di controllare il primo e l'ultimo elemento. E quale pensi di essere quello corrente che puoi visualizzare, se consideri il mezzo come corrente, usa questi per determinare l'indice medio. – HenryRat
Grazie ... questo ha aiutato molto. –