React swiper 及轮播实现

import Swiper from "swiper"
import "swiper/swiper-bundle.css"
import { Component } from "react";
import SwiperCore, { Autoplay } from 'swiper';
SwiperCore.use([Autoplay]);

class Lbt extends Component
{
    state ={}
    componentDidMount(){
        new Swiper ('.swiper-container', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      // autoplay: {
      //   delay: 1000,//1秒切换一次
      // },
      autoplay:true,
  
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
      },
  
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
  
      // 如果需要滚动条
      // scrollbar: {
      //   el: '.swiper-scrollbar',
      // },
    })
  }
    render(){
        return <div className="swiper-container" style={{width:"300px",height:"150px"}}>      
        <div className="swiper-wrapper">        
         <div className="swiper-slide" style={{backgroundColor:"red"}}>Slide 1</div>          
        <div className="swiper-slide" style={{backgroundColor:"pink"}}>Slide 2</div>         
        <div className="swiper-slide">Slide 3</div>      
        </div>
             <div className="swiper-pagination"></div>     
             <div className="swiper-button-prev"></div>
             <div className="swiper-button-next"></div>     
             {/* <div className="swiper-scrollbar"></div> */}
         </div>
    }
}


export default Lbt

 下载模块 npm install --save swiper  

 组件导入  

import Swiper from "swiper"

import "swiper/swiper-bundle.css"

import { Component } from "react";

import SwiperCore, { Autoplay } from 'swiper';

SwiperCore.use([Autoplay]);