使用React套件swiper來達成

先在終端機下載

npm install swiper

文字輪播

創建資料夾『slide』

//在slide > index.tsx中輸入以下程式碼
import React from 'react'

import { Swiper, SwiperSlide } from 'swiper/react'
import { EffectCoverflow, Navigation } from 'swiper/modules'

import styles from '@/styles/Slide.module.scss'

import 'swiper/css'
import 'swiper/css/effect-coverflow'

const Slide: React.FC = () => {

    return (
        <div className={styles['slider-container']}>
            <Swiper
                effect={'coverflow'}
                grabCursor={true}
                centeredSlides={true}
                loop={true}
                slidesPerView={3} 
                
                coverflowEffect={{
                    rotate: 0,
                    stretch: -75,
                    depth: 250,
                    modifier: 3.5,
                    slideShadows: false,
                }}
                navigation={{
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                    
                }}
                modules={[EffectCoverflow, Navigation]}
            >
                <SwiperSlide>
                    1
                </SwiperSlide>
                <SwiperSlide>
                    2
                </SwiperSlide>
                <SwiperSlide>
                    3
                </SwiperSlide>
            </Swiper>
        </div>
    )
}

export default Slide

scss

.slider-container {
    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;

   
    }
    
    .slider-controler {
        position: relative;
        bottom: 0rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        div {
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 50%;
            padding: 2.5px 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: .3s ease;

            &:hover {
                border: 1px solid currentColor;
                transition: .3s ease;
            }
        }
    }
}

照片輪播

import React from 'react'
import Image from 'next/image'

import { Swiper, SwiperSlide } from 'swiper/react'
import { EffectCoverflow, Navigation } from 'swiper/modules'

import styles from '@/styles/Slide.module.scss'
// 改照片在這裡
import B02 from "@/public/AB4A5906-3.jpg"
import B03 from "@/public/AB4A5906-3.jpg"
import B04 from "@/public/AB4A5906-3.jpg"

import 'swiper/css'
import 'swiper/css/effect-coverflow'

// 定義 Slide 組件的型別
const Slide: React.FC = () => {

    return (
        <div className={styles['slider-container']}>
            <Swiper
                effect={'coverflow'}
                grabCursor={true}
                centeredSlides={true}
                loop={true}
                slidesPerView={3} //預設瀏覽張數 若有RWD則通常設1
                
                coverflowEffect={{
                    rotate: 0,
                    stretch: -75,
                    depth: 250,
                    modifier: 3.5,
                    slideShadows: false,
                }}
                navigation={{
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                }}
                modules={[EffectCoverflow, Navigation]}
            >
                <SwiperSlide>
                    1
                </SwiperSlide>
                <SwiperSlide>
                    2
                </SwiperSlide>
                <SwiperSlide>
                    3
                </SwiperSlide>
                <SwiperSlide>
		                // 用Image 標籤來存放tsx中的照片
                    <Image src={B02.src} alt={''} width={100} height={100} />
                </SwiperSlide>
                <SwiperSlide>
                    <Image src={B03.src} alt={''} width={100} height={100}/>
                </SwiperSlide>
                <SwiperSlide>
                    <Image src={B04.src} alt={''} width={100} height={100}/>
                </SwiperSlide>
            </Swiper>
        </div>
    )
}

export default Slide

scss一樣

置中調整

.slider{
    text-align: center ;
}

增加RWD

使用breakpoints

breakpoints={{
                    640: { // 如果螢幕>=640 就執行以下程式碼
                        slidesPerView: 4, 
                        spaceBetween: 10,
                    },
                }}

增加點擊按鈕

//在左右兩側增加按鈕
navigation={true}

//在下方增加點點
pagination={{
	clickable: true, // 啟用點擊切換
}}