Swiper Slider pagination/navigation not working when I use swiper effect in React Js

user_15157239 0
Viewed 3585

I am using React Swiper slider .for some reason when I use fade Effect with swiper navigation/pagination ,swiper navigation dose not working any more.

here is my code:

import React, {Component} from 'react';

import { Swiper, SwiperSlide } from 'swiper/react';

import SwiperCore, { Navigation, Pagination ,Autoplay,EffectFade } from 'swiper';

SwiperCore.use([Navigation, Pagination,Autoplay,EffectFade ]);

export default class SliderPaginate extends Component{
   
    render(){

        return(
            <Swiper
                 loop={true}
                autoplay={{
                    delay: 5000,
                    disableOnInteraction: false
                }}
                 effect='fade'

                 fadeEffect={{
                     crossFade: true
                 }}
              
                 navigation
                 pagination={{ clickable: true }}

                 onSwiper={(swiper) => console.log(swiper)}
                 onSlideChange={() => console.log('slide change')}
            >

                   <SwiperSlide>
                       <div>slider1</div>  
                   </SwiperSlide>
                .....
               
            </Swiper>

        )
    }
}

how can I resolve this problem?

swiper.js reactjs slider javascript
2 Answers

try to add these two lines to Swiper component

      observeParents: true, <----
      observer: true, <-----
      loop={true},
      autoplay:{
            delay: 5000,
            disableOnInteraction: false
          },
      effect:'fade',

      fadeEffect:{
         crossFade: true
         },
              
      navigation:true,
      pagination:{ clickable: true }

And I prefer to add these in an object like so

const settings_swiper = {
          observeParents: true, <----
          observer: true, <-----
          loop={true},
          .....
}

and in Swiper Component do it like this

 <Swiper {...settings_swiper}></Swiper>
user_112171050

I have the same problem with js! I fix it so:

const swiper = new Swiper('.swiper', {
  loop: true,
  effect: 'fade'
});

/**
 * FIX SWIPER BUG
 * WITH FADE EFFECT
 */

const fixSwiperNavWithFade = (target = 'next') => {
const currentSlide = document.querySelector('.swiper-slide-active');
  if (currentSlide && typeof currentSlide !== 'undefined') {
    const ariaLabel = currentSlide.getAttribute('aria-label');
    if (ariaLabel && typeof ariaLabel !== 'undefined') {
      ariaCurrent = parseInt(ariaLabel.split(' / ')[0]);
      ariaEnd = parseInt(ariaLabel.split(' / ')[1]);
      if (target === 'next') {
        if (ariaCurrent >= ariaEnd) {
          ariaCurrent = 1;
        } else {
          ariaCurrent++;
        }
      }
      if (target === 'prev') {
        if (ariaCurrent <= 1) {
          ariaCurrent = ariaEnd;
        } else {
          ariaCurrent--;
        }
      }
      swiper.slideTo(ariaCurrent);
    }
  }
}

document.querySelector('.swiper-button-next').onclick = () => {
  fixSwiperNavWithFade('next');
}

document.querySelector('.swiper-button-prev').onclick = () => {
  fixSwiperNavWithFade('prev');
}

Will it help you?

user_194009970
Related