希曼日记

搜索文章、笔记与小说

    输入关键词开始搜索

    Swiper

    普通版本

    参考官网例子即可

    React

    1. 使用swiper提供的react组件版本
    2. swipt组件从swiper获取
    3. HTML组件从swiper/react组件获取

    例子:

    JSX
    import { Navigation } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/react';
    

    import 'swiper/css';
    import 'swiper/css/navigation';
    

    function App() {
      return (
        <Swiper
          modules={[Navigation]}
          navigation={{ prevEl: '.prev', nextEl: '.next' }}
          loop
          pagination={{ clickable: true }}
        >
          <SwiperSlide>Slide 1</SwiperSlide>
          <SwiperSlide>Slide 2</SwiperSlide>
          <SwiperSlide>Slide 3</SwiperSlide>
          <SwiperSlide>Slide 4</SwiperSlide>
          <button className='prev'>prev</button>
          <button className='next'>next</button>
        </Swiper>
      )
    }
    

    export default App