Hide swiper js navigation buttons(left and right) when no more images are present in the particular direction

I found a simple solution using CSS

.swiper-button-disabled{
    display:none;   
}

This will automatically hide the navigation button of that direction when no images are present in that direction.

Using jQuery, you could do something like:

if (swiper.activeIndex===0) {
  $('.left-slide').hide()
  $('.right-slide').show()
} else if (swiper.activeIndex === swiper.slides.length-1) {
  $('.left-slide').show()
  $('.right-slide').hide()
}

First condition is the first slide

If you want to hide it with a fading effect you can simply do this:

.swiper-button-next, .swiper-button-prev {
  opacity: 1;
  transition: 0.5s ease-in-out;
}
    
.swiper-button-disabled {
      visibility: hidden;
      opacity: 0;
      transition: 0.5s ease-in-out;
}