How can I hide swiper js navigation buttons(left and right) when no more images are present in the particular direction

Eg. When there are no images in the right direction then the right navigation button should get hidden.

How can I hide swiper js navigation buttons(left and right) when no more images are present in the particular direction

Eg. When there are no images in the right direction then the right navigation button should get hidden.

• javascript
• slider
• swiper.js

4 Answers 4

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.

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

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

As stated in previous answers you can do it by adding styles to .swiper-button-disabled default class

&.leftIcon, &.rightIcon, &.topIcon, &.bottomIcon{
 opacity: 1;
 visibility: visible;
 transition: all 0.4s ease;
 &.swiper-button-disabled {
  opacity: 0;
  visibility: hidden;
 }
}

Using Swiper in React

if you want to do additional stuff like hide fading effect, you can use onActiveIndexChange prop. The e param has the isBeginning and isEnd boolean values that return true if you're in the beginning or end of the carousel.

const [disableFading, setDisableFading] = React.useState<'isBeginning'|'isEnd'|null>('isBeginning');

 <Swiper
  className={`swiperComponent ${disableFading === "isEnd" ? 'disabledFading' : ''}`}
  onActiveIndexChange={(e) => {
   if(e.isBeginning){
     setDisableFading("isBeginning");
   } else if(e.isEnd){
     setDisableFading("isEnd");
   } else {
     setDisableFading(null)
   }
  }}
/>