How to fix – Swiper.js navigation prev/next button not working [javascript]

A slider library swiper.js that does not require jQuery and works only with javascript.

How to use Swiper

Below is a brief explanation of how to use Swiper.

Swiper installation

Load Swiper’s javascript. Here, we will use the latest version provided by the CDN.

// CSS
<link rel="stylesheet" href="//unpkg.com/swiper/swiper-bundle.min.css">

// JavaScript
<script src="//unpkg.com/swiper/swiper-bundle.min.js"></script>

HTML

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide1</div>
    <div class="swiper-slide">Slide2</div>
    <div class="swiper-slide">Slide3</div>
  </div>

  <div class="swiper-pagination"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-scrollbar"></div>
</div>

Javascript

Create Swiper class and set option.

var Swiper = new Swiper('.swiper-container', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  scrollbar: {
    el: '.swiper-scrollbar',
  },
})

Complete.

Demo

https://choppydays.com/static/swiperjs/

The reason why Swiper.js does not work

Option specification differs depending on the Swiper version

// ver 5
var Swiper = new Swiper('.swiper-container', {
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  }
})

// ver 4
var Swiper = new Swiper ('.swiper-container', {
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
});

Swiper pagenation does not work

When Swiper pagenation does not work by clicking, add the option for pagenation for “clickable” option.

  pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    clickable: true,
  },

Swiper.js navigation prev/next button does not work

demo(fault)

https://choppydays.com/static/swiperjs/prevnextnotworking.html

The reason for prev/next button not working is “CSS” .

Swiper may not work properly, such as when installed in WordPress.

As a result of investigation, it was found that the cause may be the CSS included in the default theme “Twenty Twenty” of WordPress.

CSS

* {
   transition-duration: 0s !important;
}

If the css is declared in style sheet , Swiper is not working.

If the case , the declaration is removed or the below css is added.

@media ( prefers-reduced-motion: reduce ) {
   .sip-slider, .swiper-container, .swiper-wrapper, .swiper-slide, .swiper-slide img{
    transition-duration: 100ms !important;
  }
}