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'

<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 模块，不然不起作用