swiper 模块加载

import { Swiper, SwiperSlide } from 'swiper/react'

import { Autoplay, Pagination, Navigation } from 'swiper/modules'

// Import Swiper styles

import 'swiper/css'

import 'swiper/css/pagination'

import 'swiper/css/navigation'

import './swiper.css'

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<br><Swiper           slidesPerView={1}           spaceBetween={30}           loop={true}           pagination={{             clickable: true,           }}           autoHeight={true}           // navigation={true}           autoplay={{             delay: 5000,             disableOnInteraction: false,           }}           modules={[Autoplay, Pagination, Navigation]}           className="mySwiper"           // navigation={{           //   nextEl: '.swiper-button-next',           //   prevEl: '.swiper-button-prev',           // }}         >           {swiperList &&             swiperList.map((item: any, index) => {               return (                 <SwiperSlide key={index + item.description} onClick={() => skipDetail(item)}>                   <Image                     className="w-full object-cover cursor-pointer "                     style={{ width: '25.875rem', height: '11.25rem' }}                     src={item.content}                     alt={item.description}                     loading="lazy"                     decoding="async"                     width={20}                     height={80}                   />                 </SwiperSlide>               )             })}           {/* <div className="swiper-button-prev ">             <ChevronLeft className="text-white" />           </div>           <div className="swiper-button-next ">             <ChevronRight className="text-white" />           </div> */}         </Swiper>

　　

改变上下箭头  利用注释的2个class dom 放开  引入即可
自动播放记得引入autoplay 模块，不然不起作用