CODEWITHSUNDEEP
jquerynavigationsliderhide
NewbCake
NewbCake

Reputation: 443

iDangerous Swiper - hide navigation arrows from first and last slide

Using iDangerous Swiper how do you target and hide the .left-arrow class of the first slide? There is this in the documentation - mySwiper.getFirstSlide() - returns first slider slide (slide instance) but how do you indicate that when on this slide hide the left arrow?

Not handy with js but I've tried things like this with no success:

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

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

This probably needs to be a conditional statement - if it's the first slide then hide the left arrow else show it. I'm just not sure how to set something like that up. Any help is appreciated. Thanks.

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

Upvotes: 4

Views: 19101

Answers (4)

pbaranski
pbaranski

Reputation: 24972

For ionic
In controller assigned to ion-content containing ion-slides
add slider to scope:

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

add hiding/inactivating css class like:

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

apply class on buttons with proper condition - here my buttons placed in footer just after </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>

Upvotes: 0

Ronald M&#233;ndez
Ronald M&#233;ndez

Reputation: 81

It's much easier than you think, specially if you're not handy with JS, considering you could solve this with pure CSS.

Swiper assigns a CSS class named ".swiper-button-disabled" to the first and last arrow, to make sure the swiper doesn´t move any further. Try this:

.left-arrow.swiper-button-disabled {opacity: 0;}

Upvotes: 6

yurij
yurij

Reputation: 21

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');
        }
    }
})

Upvotes: 2

Jorge Y. C. Rodriguez
Jorge Y. C. Rodriguez

Reputation: 3449

Try something like this, it may work as you want if i did understand the question right:

  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();
  });

Upvotes: 0

Related Questions