在react中使用swiper/react

参考链接：https://swiper6.vercel.app/react#usage

其实swiper中文文档很多api都是直接阔以用的，只是形式不一样

中文文档：https://www.swiper.com.cn/api/

安装：yarn add swiper@6

import { Swiper, SwiperSlide } from 'swiper/react'
import { sliderList } from './source'
import SwiperCore, { Pagination, Autoplay, Navigation } from 'swiper'
import styled from '@emotion/styled'

// Import Swiper styles
import 'swiper/swiper-bundle.css'
import { useEffect, useState } from 'react'

export const MaskingLeft = styled.div`
  left: ${(props) => `${-props.offset}px`};
`

export const MaskingRight = styled.div`
  right: ${(props) => `${-props.offset}px`};
`

// 另外加载其他附加模块，比如 Navigation、Pagination 等模块
SwiperCore.use([Pagination, Autoplay, Navigation])

const ITEM_WIDTH = 1200
const MARGIN_RIGHT = 48

export const SwiperHome = () => {
  const [offset, setOffset] = useState(ITEM_WIDTH)
  
  const pagination = {
    "clickable": true,
    "renderBullet": function (index, className) {
            return '';
          }
  }
  
  // 自定义前进后退按钮navigation   需要加.
  const navigation = { prevEl: '.masking-left', nextEl: '.masking-right' }
  
  return (
    

      
      
       {
          console.log(swiper, "onSwiper")
        }}
      >
        {sliderList.map((item, index) => {
          return (
            
              

                
                
{item.title}
                
{item.titleTwo}
                
{item.text}
              
              

                
              
            
          )
        })}
      
    
  )
}