当我在 React Js 中使用滑动效果时，滑动滑块分页/导航不起作用答案

【问题标题】：Swiper Slider pagination/navigation not working when I use swiper effect in React Js当我在 React Js 中使用滑动效果时，滑动滑块分页/导航不起作用
【发布时间】：2024-01-03 08:44:01
【问题描述】：

我正在使用 React Swiper 滑块。由于某种原因，当我使用带有滑动导航/分页的淡入淡出效果时，滑动导航不再起作用。

这是我的代码：

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>

        )
    }
}

我该如何解决这个问题？

【问题讨论】：

标签： javascript reactjs slider swiper

【解决方案1】：

尝试将这两行添加到 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>

【讨论】：