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