swiper-react-component,swiper

description

基于支持useState,useRef,useEffect等hooks的react版本的轮播组件,有左右和上下轮播方向。

支持左右点击箭头切换，也可以点击下方指示器切换。

支持鼠标左键点击item项后滑动切换。支持鼠标滚动切换。

具体配置、事件、插槽可看下方详细文档

组件使用

  import { useState } from 'react'
  import SwiperReact from 'swiper-react-component'

  function App() {

    const list = [
      {
        id: 1,
        title: 'title1',
        content: 'content1'
      },
      {
        id: 2,
        title: 'title2',
        content: 'content2'
      },
      {
        id: 3,
        title: 'title3',
        content: 'content3'
      }
    ]
    
    return (
      <>
      <SwiperReact height={300} width={600} delay={ 3000 } mouseScroll>
        {
          list.map(item=>{
            return <div key={ item.id } style={{ height: "100%",width: "100%",background: "#99A9BF",display: 'flex',alignItems: 'center',justifyContent:"center"}}>
              { item.content }
            </div>
          })
        }
      </SwiperReact>
      </>
    )
}

export default App

Properties

|property|type|default|description| |:---|:---|:---|:---| |direction|String|horizontal|当前轮播的方向，默认为horizontal水平，vertical为垂直| |autoplay|Boolean|true|是否自动播放轮播| |delay|Number|3000|自动播放间隔，单位毫秒，默认3秒| |indicator|Boolean|true|是否显示轮播底部指示器| |mouseSlider|Boolean|false|是否开启鼠标点击轮播项左右滑动切换| |triggerMove|Number|null|鼠标点击轮播项左右滑动切换的触发值，默认为滑动该容器1/2.5宽度或者高度切换| |mouseScroll|Boolean|false|是否开启鼠标滚轮切换轮播，默认不开启| |hoverStop|Boolean|true|鼠标悬停时暂停轮播，默认为true| |arrow|String|always|左右切换箭头的显示形式，默认一直显示，值为always、hover、none| |height|Number|200|轮播容器高度| |width|Number|null|轮播容器宽度，默认为容器父元素宽度| |preArrowComponent|ReactNode|null|自定义左箭头组件| |nextArrowComponent|ReactNode|null|自定义右箭头组件|

swiper Event

|name|description| |:---|:---| |onChange|轮播切换后触发事件，function(index: number){}|