Nuxt.js 3.x 套件應用－Swiper 製作輪播動畫

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

建立輪播動畫


     <Swiper>

、


     <SwiperSlide>

（名稱依照前面設定的 prefix）

自動引入模組： 依照前面設定的 modules，這裡為


     <SwiperNavigation>

以及


     <SwiperPagination>

props 傳入屬性： 屬性選項參考 Swiper 官方文件

// pages/swiper.vue
<template>
    <div>
        <Swiper
            :modules="[ SwiperNavigation, SwiperEffectCreative ]"
            :slides-per-view="1"
            :space-between="16"
            :loop="true">
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
        </Swiper>
    </div>
</template>

或是將屬性包裝成物件，透過 v-bind 傳入，配置選項較複雜時，能提升模板可讀性

// pages/swiper.vue
<template>
    <div>
        <Swiper v-bind="swiperConfig">
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>
        </Swiper>
    </div>
</template>

<script setup>
const swiperConfig = {
    modules: [
        SwiperNavigation,
        SwiperEffectCreative
    ],
    slidesPerView: 1,
    spaceBetween: 16,
    loop: true,
    breakpoints: {
        545: {
            slidesPerView: 2
        },
        1080: {
            slidesPerView: 3
        },
        1280: {
            slidesPerView: 4
        }
    }
};
</script>

Swiper 事件

事件選項參考官方文件

// pages/swiper.vue
<template>
    <div>
        <Swiper @slide-change="slideChange()">
            ...
        </Swiper>
    </div>
</template>

<script setup>
const slideChange = () => {
    console.log('slideChange');
};
</script>

Swiper 樣式

使用 Swiper 預設樣式（樣式選擇）

// import Swiper 與模組樣式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

useSwiper 實作控制按鈕

使用 Swiper Vue useSwiper hook，來取得 Swiper 實體，呼叫相關方法（ex: slidePrev() ）

// components/SwiperController.vue
<template>
    <button @click="direction === 'prev' ? swiper.slidePrev() : swiper.slideNext()">
        {{ direction }}
    </button>
</template>

<script setup>
const props = defineProps({
    direction: {
        type: String,
        default: '',
        validator: value => {
            return [ 'prev', 'next' ].includes(value);
        }
    }
});

const swiper = useSwiper();
</script>

// pages/swiper.vue
<template>
    <div>
        <Swiper>
            <SwiperSlide>Slide 1</SwiperSlide>
            <SwiperSlide>Slide 2</SwiperSlide>
            <SwiperSlide>Slide 3</SwiperSlide>
            <SwiperSlide>Slide 4</SwiperSlide>

            <SwiperController direction="prev" />
            <SwiperController direction="next" />
        </Swiper>
    </div>
</template>

參考資源：

https://github.com/cpreston321/nuxt-swiper#readme
https://swiperjs.com/vue

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now