Search code examples
javascriptswiper.js

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

Solution

  • 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', {
  .
  .
  .
});