iDangero.nous Chipeur diapositive compter lorsque la boucle est vrai

Je suis en utilisant iDangero.nous Chipeur js pour un site web, et le code d'initialisation est la suivante:

var mySwiper = new Swiper( '.swiper-container', {
    direction: 'horizontal',
    loop: true,
    speed: 600,
    nextButton: '.slider-control-next',
    prevButton: '.slider-control-prev',
} );

Et j'ai besoin d'obtenir actuelle du curseur index et le nombre total de curseurs. Chipeur API fournit mySwiper.activeIndex propriété et mySwiper.diapositives, mais le problème est que lorsque la boucle est vrai qu'ils ne donnent pas à l'index correct et à compter.

Est-il possible d'obtenir ces chiffres correctement lorsque la boucle est vrai?

InformationsquelleAutor Hakim Jaya | 2015-03-30

2

Le nombre de diapositives, et donc parfois la activeIndex, est "mauvais" lorsque les boucles sont impliqués: https://github.com/nolimits4web/Swiper/issues/1205

Mieux que j'ai pu trouver pour obtenir le nombre total de diapositives est:
```
mySwiper.slides.length - 2
```
Vous pourriez l'utiliser pour obtenir l'indice actuel (celui-ci est basé sur zéro):
```
(mySwiper.activeIndex - 1) % (mySwiper.slides.length - 2)
```
Ce n'est pas l'idéal, bien sûr. Vous pourriez ouvrir un GitHub problème et de proposer l'ajout de moyens plus commodes d'accès à ces valeurs.
- Merci pour votre réponse. "mySwiper.les diapositives.longueur - 2" semble renvoyer un nombre correct de diapositives, mais activeIndex renvoie 2 pour la première diapositive lorsque l'indice de base zéro comme vous le mentionnez. Je suppose que j'ai besoin d'ouvrir github question.
- Oh.. mon erreur.. votre façon d'avoir de la diapositive actuelle des rendements corrects numéro de la diapositive à maintenant, mais je suis d'accord que ce n'est pas un moyen idéal.
- Le realIndex propriété a été ajoutée! github.com/nolimits4web/Swiper/pull/1697
InformationsquelleAutor Henrik N
5

En Mai 2016, ils ont ajouté le realIndex propriété!

De choses à connaître: 1.) le realIndex propriété est retourné comme un string au lieu d'un entier (juste au cas où vous avez besoin de faire des maths avec elle) 2.) le realIndex propriété commence à 0(comme il se doit), à la différence de activeIndex en mode boucle qui dans mon cas a commencé avec 1

https://github.com/nolimits4web/Swiper/pull/1697

InformationsquelleAutor Peter Valadez
3

Juste en ajoutant encore une autre réponse, depuis Chipeur n'incluait pas le realIndex bien encore. Voici une jolie façon de faire de l'indice réel si la boucle, sans soustraire une codés en dur nombre (qui peut changer facilement).
```
var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
```
Utilisée comme ceci:
```
var slider = new Swiper('.swiper-container');
slider.on('slideChangeEnd', function(e) {
    var realIndex = e.slides.eq(e.activeIndex).attr('data-swiper-slide-index');
    //do whatever
});
```
- Sans nécessiter de jquery, vous pouvez le faire avec e.slides[e.activeIndex].attributes['data-swiper-slide-index'].value
- J'utilise chipeur js beaucoup. C'est ce qui a fonctionné pour moi! Mais j'ai dû les convertir à un nombre entier d'effectuer une action sur elle: parseInt(e.les diapositives.eq(e.activeIndex).attr('data-chipeur-slide-index'));
InformationsquelleAutor peirix

Bien que cette question a déjà répondu, je pensais que je voudrais ajouter mon code de travail en fonction de la accepté de répondre.

Principal problème que j'ai eu avec une boucle au niveau de la galerie, c'est que si vous revenez en arrière à partir de la première diapositive, la diapositive actuelle se lit comme 0. Peut-être parce que c'est un clone?

De toute façon, voici un stripped-back (un peu non testé) solution de travail:

(function($) {

    'use strict';

    var gallery;

    gallery = $('#gallery').swiper({
        parallax: false,
        initialSlide: 0,
        direction: 'horizontal',
        loop: true,
        autoplay: 5000,
        autoplayDisableOnInteraction: false,
        speed: 700,
        preventClicks: true,
        grabCursor: true,
    });

    var totalSlides = gallery.slides.length - 2;

    $('#total').html(totalSlides);

    gallery.on('slideChangeEnd', function(instance) {

        var currentCount = (instance.activeIndex - 1) % (totalSlides) + 1;

        if(currentCount === 0) {
            $('#current').html(totalSlides);
        } else {
            $('#current').html(currentCount);
        }

    });

})(jQuery);

Ci-dessus pour afficher actuel et total de diapositives sur votre page. Évidemment régler l'ID qui est dans votre code HTML en conséquence.

InformationsquelleAutor Michael Giovanni Pumo

Je pense que cette valeur de l'indice de valeur devrait être disponible dans les Chipeur de l'API, mais il est nulle part pour être trouvée, donc pour l'instant, vous devrez supprimer votre propre fonction pour obtenir cette valeur.

Cette fonction (testé et fonctionne) m'a été transmis dans ce fil de discussion sur le Chipeur GitHub Questions de page: Besoin d'un moyen pour obtenir le exacte activeIndex en mode boucle

En mode boucle active valeur de l'indice sera toujours décalé sur un certain nombre de boucle, dupliqué, diapositives. vous pouvez obtenir de l'attribut "data-chipeur-slide-index' avec une fonction comme:

function getSlideDataIndex(swipe){
    var activeIndex = swipe.activeIndex;
    var slidesLen = swipe.slides.length;
    if(swipe.params.loop){
        switch(swipe.activeIndex){
            case 0:
                activeIndex = slidesLen-3;
                break;
            case slidesLen-1:
                activeIndex = 0;
                break;
            default:
                --activeIndex;
        }
    }
    return  activeIndex;
}

Utilisation:

var mySwiper = new Swiper('.swiper-container', {
    direction: 'vertical',
    loop:true,
    onSlideChangeEnd:function(swipe){
        console.log(getSlideDataIndex(swipe))
    }
});

InformationsquelleAutor Phong

ce travail dans les deux modes, en boucle ou pas

var $slideActive = $('.swiper-slide-active');
var realIndex = $slideActive.data('swiper-slide-index');
if(typeof realIndex === 'undefined') {
    realIndex = $slideActive.index();
}

aussi, le nombre total de diapositives dans les deux modes:

var totalSlides = $('.swiper-slide:not(.swiper-slide-duplicate)').length;

InformationsquelleAutor Fabri

Vous devez vous connecter pour publier un commentaire.