当我在 React Js 中使用 swiper 效果时，Swiper Slider 分页/导航不起作用

如何解决当我在 React Js 中使用 swiper 效果时，Swiper Slider 分页/导航不起作用

我正在使用 React Swiper 滑块。出于某种原因，当我将淡入淡出效果与 swiper 导航/分页一起使用时，swiper 导航不再起作用。

这是我的代码：

import React,{Component} from 'react';

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

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

SwiperCore.use([Navigation,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>

        )
    }
}

我该如何解决这个问题？

解决方法

尝试将这两行添加到 Swiper 组件中

      observeParents: true,<----
      observer: true,<-----
      loop={true},autoplay:{
            delay: 5000,disableOnInteraction: false
          },effect:'fade',fadeEffect:{
         crossFade: true
         },navigation:true,pagination:{ clickable: true }

我更喜欢将这些添加到像这样的对象中

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

并在 Swiper 组件中这样做

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