In a website I'm writing I have one div with the ".swiper-slide" class on it. Then, when I plete a form several divs with ".swiper-slide" class will be generated. The problem is that swiper recognize my very first slide as the last one and disables the button with ".swiper-slide-next". Is there a way to prevent swiper from disabling it?.

I wrote this code and it works. I'm wondering if exists a more clean way to do this.

if(swiper.isEnd){
    
    $("#prosegui").removeClass("swiper-button-disabled");
    $("#prosegui").removeClass("swiper-button-lock");
    $("#prosegui").removeAttr("disabled");
    $("#prosegui").removeAttr("tabindex");
    $("#prosegui").removeAttr("aria-disabled");
    $("#prosegui").removeAttr("aria-controls");
}

Where "#prosegui" is the next-slide button.

Thank you all.

In a website I'm writing I have one div with the ".swiper-slide" class on it. Then, when I plete a form several divs with ".swiper-slide" class will be generated. The problem is that swiper recognize my very first slide as the last one and disables the button with ".swiper-slide-next". Is there a way to prevent swiper from disabling it?.

I wrote this code and it works. I'm wondering if exists a more clean way to do this.

if(swiper.isEnd){
    
    $("#prosegui").removeClass("swiper-button-disabled");
    $("#prosegui").removeClass("swiper-button-lock");
    $("#prosegui").removeAttr("disabled");
    $("#prosegui").removeAttr("tabindex");
    $("#prosegui").removeAttr("aria-disabled");
    $("#prosegui").removeAttr("aria-controls");
}

Where "#prosegui" is the next-slide button.

Thank you all.

• javascript
• html
• jquery
• slide
• swiper.js

2 Answers 2

I also have problems when I press the next button for the first time, so to avoid the button disabled I use slideNextTransitionEnd like this

in view

<div class="swiper-button-next" id="slide-next-button"></div>

then in script

const swiper = new Swiper('#my-swipper-slide', {
        direction: 'horizontal',
        pagination: {
            el:'.swiper-pagination',
        },
        navigation: {
            nextEl:'.swiper-button-next',
            prevEl:'.swiper-button-prev',
        },
        allowSlidePrev: true,
        allowSlideNext: true,
        loop:true
    });

swiper.on('slideNextTransitionEnd',function(){
    if($("#slide-next-button").hasClass("swiper-button-disabled")){
        $("#slide-next-button").removeClass("swiper-button-disabled");
        $("#slide-next-button").attr("aria-disabled", "false");
    }
})

This example is working. What exactly would you like to do at the end?
At the last slide my code will give you a console.log and recognize that the last slide is reached.
If you like to play with the code see that fiddle I made for you: https://jsfiddle/bogatyr77/rux9jekt/2/

const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'horizontal',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  }
});

swiper.on('reachEnd', function(){
     console.log("reach to End");
});

.swiper {
  width: 600px;
  height: 300px;
}

<script src="https://unpkg./swiper@7/swiper-bundle.min.js"></script>
<link href="https://unpkg./swiper@7/swiper-bundle.min.css" rel="stylesheet"/>
<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide"><img src="https://via.placeholder./600">
</div>
    <div class="swiper-slide"><img src="https://via.placeholder./600"></div>
    <div class="swiper-slide"><img src="https://via.placeholder./600"></div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>