tiny-react-swiper v0.1.17

使用

安装

npm i tiny-react-swiper

引入 css

import 'tiny-react-swiper/dist/swiper.css'

引入组件

import Swiper from 'tiny-react-swiper'

const imageSrc = [
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp',
  '//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/24e0dd27418d2291b65db1b21aa62254.png~tplv-uwbnlip3yd-webp.webp',
];

export default function Demo() {
  const ref = useRef<SwiperRef>(null);

  return (
    <>
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-around',
          margin: '10px',
        }}
      >
        <button onClick={() => ref.current?.moveToPrevious()}>Previous</button>
        <button onClick={() => ref.current?.moveTo(1)}>Slider-1</button>
        <button onClick={() => ref.current?.moveTo(2)}>Slider-2</button>
        <button onClick={() => ref.current?.moveToNext()}>Next</button>
      </div>

      <Swiper ref={ref}>
        {imageSrc.map(img => {
          return (
            <img
              key={img}
              className="w-full"
              height={196}
              width={349}
              alt="introduce_1"
              loading="eager"
              src={img}
            />
          );
        })}
      </Swiper>
    </>
  );
}