swiper-react-component v0.0.2

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

swiper Event