swiper-react-component

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){}