Selecting elements to hide if either first or last in an array

Question

I'm using this slider with looping turned off but the issue I am running into is the display of the navigational arrows for the first and last slides. I am having troubling finding a way to communicate that the left arrow should be hidden on the first slide and the right arrow for the last slide.

Can you target those specific slides with mySwiper.getFirstSlide()/mySwiper.getLastSlide() then hide the display of their respective arrows? Or set up get the length of the array and designate the each arrow to hide either if it is the first or last in that list?

I'm not sure if these are correct approaches. I am open to any suggestions.

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

Answer 1

Try this,

$('.arrow-left').hide()  
var mySwiper = new Swiper('.swiper-container',{
    loop:false,
    onSlideChangeEnd: function () {
      $('.arrow-left').show()
      $('.arrow-right').show()
       if(mySwiper.activeIndex==0){
       $('.arrow-left').hide()
       }
      if(mySwiper.activeIndex==mySwiper.slides.length-1){
      $('.arrow-right').hide()
      }
    }

  })
  $('.arrow-left').on('click', function(e){
    e.preventDefault()
   // alert(mySwiper.previousIndex)
    mySwiper.swipePrev()
  })
  $('.arrow-right').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
  })

Here is Demo link http://codepen.io/dhana36/pen/LbHzn