iDangerous Chipeur - masquer les flèches de navigation à partir de la première et de la dernière diapositive

À l'aide de iDangerous Chipeur comment cibler et de cacher la .flèche gauche d'une classe de première diapositive? Il est présent dans la documentation - mySwiper.getFirstSlide() - retourne la première curseur de la diapositive (slide exemple) mais comment voulez-vous indiquer que lorsqu'sur cette diapositive cacher la flèche de gauche?

Pas à portée de main avec js mais j'ai essayé des choses comme cela, sans succès:

mySwiper.getFirstSlide({
  $(this).find('.left-arrow').hide(),
});

var firstSlide = mySwiper.getFirstSlide();
firstSlide.find('.left-arrow').hide();

C'est probablement ce qui doit être une instruction conditionnelle - si c'est la première diapositive, puis masquer la flèche vers la gauche ailleurs de le montrer. Je ne suis pas sûr de savoir comment définir quelque chose comme ça. Toute aide est appréciée. Merci.

http://codepen.io/NewbCake/pen/sIbxi

OriginalL'auteur NewbCake | 2014-01-31

5

Il est beaucoup plus facile que vous le pensez, surtout si vous n'êtes pas à portée de main avec JS, considérant que vous ne pouvez résoudre ce pur CSS.

Chipeur attribue une classe CSS nommée ".chipeur-bouton-désactivé" pour la première et la dernière flèche, assurez-vous que le chipeur ne pas aller plus loin. Essayez ceci:
```
.left-arrow.swiper-button-disabled {opacity: 0;}
```
Apparemment, il n'est donc seule à partir de la 3.0.

OriginalL'auteur Ronald Méndez

var howManySlides = $('.swiper-wrapper .swiper-slide').length - 1;
$(".arrow-left").addClass('hide');
var mySwiper = new Swiper('.swiper-container',{
    loop:false,
    onSlideChangeStart: function(){
        $(".tabs .arrow-left,.tabs .arrow-left").removeClass('hide');
        if(tabsSwiper.activeIndex === 0) {
            $(".tabs .arrow-left").addClass('hide');
        }
        if(tabsSwiper.activeIndex === howManySlides) {
            $(".tabs .arrow-right").addClass('hide');
        }
    }
})

OriginalL'auteur yurij

0

Essayer quelque chose comme cela, il peut fonctionner comme vous le souhaitez si j'ai compris le droit de la question:
```
  var mySwiper = new Swiper('.swiper-container',{
    loop:false,

  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
     $('.arrow-right').hide();
    setTimeout(function(){
       $('.arrow-right').show();
    },3000);
    mySwiper.swipePrev();
  });
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    $('.arrow-left').hide();
    setTimeout(function(){
       $('.arrow-left').show();
    },3000);
    mySwiper.swipeNext();
  });
```
Salut. Merci pour la réponse. Désolé j'ai peut-être pas été tout à fait clair. J'essaie de toujours cacher la flèche vers la gauche que sur la première diapositive. Ainsi que de la cacher flèche de droite que sur la dernière diapositive. Toutes les diapositives dans entre devraient avoir les deux flèches.
Ah Ok je comprends maintenant.. deux secondes 🙂
Un peu de chance? Est la façon de procéder pour obtenir la longueur de l'diapositives, puis masquer la flèche gauche de la diapositive si la diapositive dans la matrice est égal à 0?

OriginalL'auteur jycr753

Pour ionic

Dans le contrôleur assigné à ion-content contenant ion-slides

ajouter un curseur à portée:

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
            //data.slider is the instance of Swiper
            $scope.mySlider = data.slider;
        });

ajouter cacher/inactivation de classe css comme:

.inactive-my-button {
    pointer-events: none;
    opacity: 0.4;
}

appliquer classe sur les boutons avec une bonne condition - là, mes boutons placés en pied de page juste après </ion-slides>

<ion-footer-bar >
    <div class="buttons" 
         ng-click="mySlider.slidePrev()" 
         ng-class="{'inactive-my-button': (mySlider.activeIndex == 0)}">
        <div class="swiper-button-prev"></div>
    </div>
    <h1 class="title"></h1>
    <div class="buttons" 
         ng-click="mySlider.slideNext()" 
         ng-class="{'inactive-my-button': (mySlider.activeIndex == mySlider.slides.length-1)}">
        <div class="swiper-button-next"></div>
    </div>
</ion-footer-bar>

OriginalL'auteur pbaranski

Vous devez vous connecter pour publier un commentaire.