时间戳

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

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

问题描述

我正在使用 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>

        )
    }
}

我该如何解决这个问题？

标签： javascriptreactjssliderswiper

解决方案

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

推荐阅读