CODEWITHSUNDEEP
javascriptjqueryswiper.js
Justin
Justin

Reputation: 301

SwiperJS - Previous and Next buttons not working

I am working with SwiperJS (www.swiperjs.com), and I am having an issue where the swipe to the next photo is working, but the previous and next buttons are not. I have looked at every article I can find on here as well as following their documentation, and still not having any luck.

    <div id="openModal" class="modalDialog" style="display: none;">
    <div class="modal-content">
        <a href="#close" title="Close" class="close" onclick="$('#openModal').hide()">X</a>
        <h2>Modal Box</h2>
        <p>Hello world</p>
        <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
        <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
        <!-- Slider main container -->
        <div class="swiper-container">
            <!-- Additional required wrapper -->
            <div id="swiper" class="swiper-wrapper">
                <!-- Slides -->
                <div class="swiper-slide"><img src="http://<server>/path/to/image.png"></div>
                <div class="swiper-slide"><img src="http://<server>/path/to/image2.png"></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>
        <script>
        var mySwiper = new Swiper ('.swiper-container', {
            // Optional parameters
            direction: 'horizontal',
            loop: true,
            centeredSlides: true,
            slidesPerView: 1,

            pagination: '.swiper-pagination',
            paginationClickable: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
        })
        </script>

For initializing the Swiper JS I have also tried this right from their website:

  <script>
  var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'vertical',
    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',
    },
  })
  </script>

Does anybody have any ideas on what I could try? I also found that the pagination buttons are not showing at the bottom like in their example, but that is less of an issue compared to the previous and next buttons not working. Like I said, if I click and drag or "swipe," it moves just fine to the next slide, so I am assuming its related to the JS section, but not sure what to try.

Upvotes: 8

Views: 53071

Answers (10)

Safyan Yaqoob
Safyan Yaqoob

Reputation: 552

I faced a prev-next navigation issue when I moved from language 'en' to 'ar. '

After using this changeLanguageDirection(direction) swiper function, it worked fine.

const swiper = document.querySelector('.swiper').swiper;
var direction = currentLang === 'ar' ? 'rtl': 'ltr';
swiper.changeLanguageDirection(direction);

Hope this helps someone!

Upvotes: 0

user28167340
user28167340

Reputation: 1

enter image description here

.slider-position-prev is good enter image description here

.slider-position-next is not enter image description here

code:

// main.js
const swiper = new Swiper('.slider', {
  loop: true,
  grabCursor: true,
  spaceBetween: 30,
  observer: true,
  observeParents: true,
  parallax:true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    dynamicBullets: true
  },

  navigation: {
    prevEl: '.slider-position-prev',
    nextEl: '.slider-position-next',
  },

  breakpoints: {
      0: {
        slidesPerView: 1,
      },
    },
});

Upvotes: 0

WebDevPassion
WebDevPassion

Reputation: 703

Not trying to revise the previous answers, but hinting an additional tip, especially when upgrading from a previously functional old version to a newer version of Swiper:

The current documentation states the following:

By default Swiper exports only core version without additional modules (like Navigation, Pagination, etc.). So you need to import and configure them too

In my case I needed to add the navigation module to the SwiperOptions of the Swiper instance initialisation after upgrading from an old version to a current one.

import Swiper from 'swiper';
import { Navigation } from 'swiper/modules';  // Don't forget to import Navigation

const swiper = new Swiper(someHTMLElement, {
    modules: [Navigation], // This is the line I needed to add
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
// your additional config
});

PS: someHTMLElement has to be a CSSSelector or HTMLElement

Upvotes: 5

Wlad
Wlad

Reputation: 59

Connect the slider in this way and everything will work!

import { Swiper, Parallax, Navigation} from 'swiper'
Swiper.use([ Parallax, Navigation ])

document.addEventListener('DOMContentLoaded', () => {
  const swiper = new Swiper('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    loop: false,
    speed: 2400,
    parallax: true,

    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
})

Upvotes: 5

Justin
Justin

Reputation: 301

Thank you for your help! The issue for my problem ended up being that I needed to add this to my swiper config:

observer: true,
observeParents: true,
parallax:true,

This is due to the swiper being inside a hidden modal.

Upvotes: 8

Md Masud
Md Masud

Reputation: 2711

My navigation buttons were disabled after loading the page. So added observer: true property. Now is working as expected.

var swiper = new Swiper(".MySwiper", {
slidesPerView: 1,
spaceBetween: 15,
centeredSlides: true,
autoplay: false,
observer: true, // adding this solve my issue
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev"
 }
});

Upvotes: 1

Weilory
Weilory

Reputation: 3121

I also had this issue, but in the scenario, I am manipulating DOM to alter full screen swiper slide display. I tried the configuration method but did not work. I have a grid of images in a small frame, when I click one of them, display the full screen slider and jump to the image.

this.imgs.forEach(img=>{
    img.onclick = () => {
        document.body.appendChild(this.gallery);
        setTimeout(()=>{
            this._swiper.slideTo(this.photos.indexOf(img.related) + 1); 
            // must bind method here
            // otherwise after dismiss swiper next prev will not fire
            this.swiper_prev.onclick = this._swiper.slidePrev.bind(this._swiper);
            this.swiper_next.onclick = this._swiper.slideNext.bind(this._swiper);
        }, 0)
    }
});

note on the setTimeout 0 method, it solved my problem in class constructor. Give it a go if you are in similar situation.

Upvotes: 0

Danial Daliry
Danial Daliry

Reputation: 1

Just write it const { swiper } = useSwiper();

that's it. thank you

Upvotes: -1

Pradip Garchar
Pradip Garchar

Reputation: 159

Just we need to add below in swiper js configuration

observer: true,
observeParents: true,
parallax:true,

So here is full configuration

var swiper = new Swiper('.relatedproducts', {
            
              observer: true,
            observeParents: true,
            parallax:true,
          slidesPerView: 6,
          loop:true,
          autoplay: true,
          simulateTouch:true,
          navigation: {
            nextEl: '.relatedproducts .swiper-button-next',
            prevEl: '.relatedproducts .swiper-button-prev',
          },
        });

This is working for me

Upvotes: 0

Yaakov David
Yaakov David

Reputation: 143

In the first section of code you posted change the JS you have to 

<script>
  var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      direction: 'horizontal',
      loop: true,
      centeredSlides: true,
      slidesPerView: 1,

      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      }
  })
  </script>

and both the arrows and the pagination should work.

What I changed is 

pagination: '.swiper-pagination',
paginationClickable: '.swiper-pagination',


To 

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


And 

nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',


To

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

Upvotes: 2

Related Questions