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]);
React swiper 及轮播实现
最新推荐文章于 2024-06-03 15:30:51 发布