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 
      
        
        
         
Slide 1
          
        
Slide 2
         
        
Slide 3
      
        
             
     
             

             
     
             {/* 
 */}
         
    }
}


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]);