J'essaie d'obtenir l'index de l'article actuel dans un JCarousel afin que je puisse afficher la position actuelle dans le carrousel à l'utilisateur. Par exemple, '13/20 '.Obtenir l'index de l'article courant dans JCarousel
Comment est-ce que je peux faire ceci?
EDIT:
échantillon du produit final:
Je pense que ce que vous cherchez est carousel.first, qui vous donnera l'index du premier élément visible (il y a aussi carousel.last pour montrer le dernier élément visible).
Voici un exemple de son utilisation, basé sur l'exemple simple carrousel avec l'ajout de la variable carousel.first et événement 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>
Je trouve cette méthode de highlighting the jcarousel controller qui peut contenir la réponse.
Cela ne semble pas aussi évident que je l'aurais espéré d'un plugin jQuery pour être honnête. Il existe deux rappels itemVisibleInCallback et itemVisibleOutCallback, mais ils ne seront utiles que si vous n'affichez qu'une seule image à la fois. Pour être honnête, même si je déteste vous envoyer un chemin totalement différent, je recommande fortement d'utiliser le cycle plugin pour le travail de carrousel, car il permet beaucoup, beaucoup plus de personnalisation que je pourrais voir de mon regard rapide à travers le jCarousel (désolé jCarousel auteur - le code lui-même semble génial!).
Moi aussi, je l'ai trouvé qui retourne jCarousel .first inutilisable,. last, .prevFirst et .prevLast propriétés aux moments où vous en avez besoin. Par conséquent, je devais le faire à la va-vite et j'ai décidé d'écrire une fonction qui retourne l'ID de n'importe quelle étiquette li qui est actuellement la première dans le conteneur, en vérifiant si elle est au-dessus de zéro. Si c'est le cas, et c'est le premier avec une position gauche au-dessus de zéro, c'est ma diapositive actuelle.
Le code suivant suppose que vous avez mis un id = "listitem-N" dans les balises de liste dans votre boucle foreach(), où N est l'itération en cours.
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;
}
La raison pour laquelle je ne retourne pas l'identifiant dans la each() est parce que chaque() est une fonction et le retour ne retourneront pour cette fonction, et non getCurrentCarouselItem().
Depends de ce que vous voulez faire, mais voici une plus « de façon générique » à faire de même, au lieu que vous retournez l'objet lui-même et non est id:
var currSlide = 0;
function getCurrentCarouselItem(){
$("ul#ulcol li.licol").each(function(){
if ($(this).offset().left >= 0){
currSlide = this;
return false;
}
});
return currSlide;
}
Vous pouvez utiliser:
function trigger(carousel, state) {
index = carousel.index(carousel.last, size of list);
}
Vous pouvez vous connecter à l'événement 'jcarousel: animate' et récupérer la diapositive en cours en tant qu'objet jQuery.
$('#mycarousel').on('jcarousel:animate', function(event, carousel) {
console.log(carousel._target); // this outputs your current slide as jQuery object.
});
Si vous avez paginations (balles)
<p class="jcarousel-pagination"></p>
vous pouvez simplement utiliser:
var index = $('.active').html();
Jcarousel ajoute la classe 'active' à balle actif, si vous avez des chiffres sur la balles vous venez de les récupérer par la méthode .html()
Vous pouvez également les transformer en entiers par parseInt:
var index = parseInt($('.active').html());
Si les éléments de votre carrousel peuvent être commandés, le seul moyen fiable que j'ai trouvé pour obtenir l'indice de l'élément en cours est:
$('#myCarousel').on('jcarousel:visiblein', 'li', function(event, carousel) {
var index = $('#'+this.id).index();
console.log('++ index: %s', index);
});
Voici pourquoi.
Vous remarquerez que this.id de chaque article dans le carrousel est quelque chose comme image-1 où 1 est l'index original de l'article dans le carrousel avant que son ordre a été changé. Cet index semble être récupérable en utilisant l'événement jcarousel:animateend et en appelant carousel.index($(this).jcarousel('first')). Cependant, une fois que vous commencez à réorganiser les éléments dans le carrousel, cet événement n'est plus utile et le numéro de l'identifiant est maintenant trompeur. Donc, nous devons utiliser la position du <li> dans le <ul> pour déterminer l'index de l'élément actuel.
Je pensais que dans un premier temps, mais le premier et le dernier ne fonctionnent pas quand plus d'une image est visible comme première image visible et la dernière image visible n'est pas toujours l'image actuelle ... – Steerpike
Désolé je ne suis pas pleinement comprendre ce que vous dites? En utilisant l'exemple simple de jcarousel, qui utilise trois images et défile horizontalement, carousel.first renverra l'élément le plus à gauche et carousel.last renverra l'élément le plus à droite. À chaque fois que vous appuyez sur les flèches gauche et droite pour effectuer les opérations suivantes et précédentes, l'événement itemLoadCallback est déclenché en transmettant les données du carrousel, ce qui vous permet de vérifier les premier et dernier éléments. Et quel que soit celui que vous considérez comme étant celui que vous pouvez afficher, si vous considérez que le milieu est courant, utilisez-les pour déterminer l'index du milieu. – HenryRat
Merci ... cela m'a beaucoup aidé. –