CODEWITHSUNDEEP
javascriptswiper.js
slideBruv
slideBruv

Reputation: 100

SwiperJs: Swiper disabled onload even though nothing is declacred as such

I've faced the Issue that a Swiper I use get the calsses swiper-button-disabled swiper-button-lock even though it should be shown.

OnLoad it looks like this:

enter image description here

When I scroll the first slider-item, the navigation is shown:

enter image description here

, which to me makes no scence. Following are my settings for this exact slider:

return { pagination: { el: '.swiper-pagination', type: 'bullets', clickable: true }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }, };

Has someone encountered the same issue as this?

Schlindibus

Upvotes: 0

Views: 6133

Answers (2)

Philip
Philip

Reputation: 890

The class swiper-button-lock is added automatically if you don't have enough slides to slide. Just add more images and it will appear

Upvotes: 0

Dragon52
Dragon52

Reputation: 36

I know tihs is older but I had same problem and the problem was that I initialised swiper with class I used on another element.

I called swiper like this

const swiper = new Swiper('.cards-wrap', {
  .
  .
  .
});

I had two elements with this class. Swiper probably tried to initiate both, but since the second one didn't have swiper-buttons nor swiper-pagination, the initialization failed and thus the buttons recieved class swiper-button-disabled.

Doing this helped me:

const swiper = new Swiper('.specs .cards-wrap', {
  .
  .
  .
});

Upvotes: 2

Related Questions