react 函数式组件 Swiper 滑动+左右按钮

1. Swiper涉及滑动：scrollbar
2. Swiper涉及隐藏左右按钮：navigation > disabledClass
3. Swiper自由滑动，不限制每组个数宽度：slidesPerView: 'auto'，给item固定宽度，超出会自己撑开，否则一个slide只展示一个item

.my-button-disabled{
  visibility: hidden;
}

const [gallery, initGallery] = useState(null)
const [activeIndex, changeActiveIndex] = useState(0)
useEffect(() => {
  initSwiper()
  return () => {
    gallery && gallery.destroy(true, true)
  }
}, [])

const initSwiper = () => {
  const gallery = new Swiper('.swiper-container_1_search', {
    observer: true,  //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true,  //修改swiper的父元素时，自动初始化swiper
    on: {
      slideChange: (e) => {
        changeActiveIndex(e.activeIndex)
        setEnd(e.isEnd)
      },
    },
    slidesPerView: 'auto',
    slidesPerGroup: 1,
    slidesPerGroupAuto: true,
    navigation: {
      nextEl: '.homePageList_right_1_search',
      prevEl: '.homePageList_left_1_search',
      disabledClass: 'my-button-disabled', // 前进后退按钮不可用时的类名。例如在第一个slide时，后退按钮不可用，该按钮会添加一个不可用时的类名
    },
    scrollbar: {
      el: '.swiper-scrollbar',
      hide: true,
      draggable: true,
      snapOnRelease: true,
      dragSize: 40,
    }
  })
  initGallery(gallery)
}

左按钮：

<div className={`homePageList_left_1_search my-button-disabled`}>
</div>

slide li:

<div className={`swiper-container_1_search swiper-container`}>
  <ul className=" swiper-wrapper swiper-no-swiping  _19Yovgro bMxGt ">
    {
      recentSearchListLimit && recentSearchListLimit.map((v, i) => {
        return (
          <li className=" swiper-slide swiper-no-swiping _3dWfPHzx" id={`recentSearchList_${i}`}  key={`recentSearchList_${i}`}
              onClick={()=>handleContent(v,i)>
          </li>
        )
      })}
  </ul>
  <div className="swiper-scrollbar"></div>
</div>

右按钮：

<div className={`homePageList_right_1_search my-button-disabled`}>
</div>