iDangerous Swiper - hide navigation arrows from first and last slide

Question

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

Answer 1

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

Answer 2

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