CODEWITHSUNDEEP
javascriptsliderswiper.js
Ajinkya Bodade
Ajinkya Bodade

Reputation: 571

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

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.

Upvotes: 9

Views: 24819

Answers (4)

Plvtinum
Plvtinum

Reputation: 317

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)
   }
  }}
/>

Upvotes: 0

Dilunga the Great
Dilunga the Great

Reputation: 887

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

Upvotes: 4

Ajinkya Bodade
Ajinkya Bodade

Reputation: 571

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.

Upvotes: 12

Eric
Eric

Reputation: 64

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

Upvotes: 1

Related Questions