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?

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?

• javascript
• reactjs
• slider
• swiper.js

1 Answer 1

try to add these two lines to Swiper ponent

      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>