前面安裝後，接著就是讓我們的網頁動起來，只是今天的應用有個坑在最後一部分會特別提到，希望對夥伴們未來使用的過程中可以試試看能不能避免或是更客製化些，事不宜遲，我們今天早點進入 Swiper 應用篇 (•̀ᴗ• ) ̑̑

#應用

這裡會分成 4 個小主題，分別是：

1. Swiper 客製化功能
2. Carousel in Bootstrap5.2
3. Carousel 走马灯 in Element Plus
4. 😲 坑：你看不見我，但可以碰到我？Oh~No~ 🙅🏻‍♀️

因應前面有介紹過樣式框架，所以還是說明一下在各個樣式框架的輪播效果，這樣大家可以比較差異性，基於信任開發，選擇權通常交付給開發，但是萬一，就是有萬一決定權不在開發身上，嗯...我就掉進坑裡啦！

- Swiper 客製化功能

客製化可以從 DEMO 中找尋自己的需求，也可以把符合需求的 DEMO 功能加在一起，以下是 Swiper 的參數列表。

註(1)：需要補上完整程式碼

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

// 這裡的 XXX 是要套上表格中的引入，記得字首改小寫，如果是大駝峰則要另外改成烤肉串
import "swiper/css/XXX";     

import "./style.css";import { XXX } from 'swiper/modules';

註(2)：如果分頁不要只是單純的點點，想要內部加上數字，可以套用

<template>
  <swiper :pagination="pagination">
    <swiper-slide v-for="(item, index) in carouselItems" :key="index">
      <img :src="item.imageUrl" alt="Carousel Image">
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination';
import './style.css';
import { Pagination } from 'swiper/modules';

const carouselItems = [
  { imageUrl: 'image1.jpg' },
  { imageUrl: 'image2.jpg' },
  { imageUrl: 'image3.jpg' },
];

const pagination = {
  clickable: true,
  renderBullet(index, className) {
    return `<span class="${className}">${index + 1}</span>`;
  },
};

const modules = [Pagination];
</script>

註(3)：立體翻轉輪播效果，因為有很多特效，所以除了要套上配置項，還有其他畫面特效的配置項：

<template>
  <swiper
    :effect="'coverflow'"           
    :grabCursor="false"
    :centeredSlides="true"
    :slidesPerView="'auto'"
    :coverflowEffect="{
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
    }"
    :pagination="true"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide v-for="(item, index) in carouselItems" :key="index">
      <img :src="item.imageUrl" alt="Carousel Image">
    </swiper-slide>
  </swiper>
</template>

<script setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/effect-coverflow";
import "swiper/css/pagination";
import "./style.css";
import { EffectCoverflow, Pagination } from "swiper/modules";

const carouselItems = [
  { imageUrl: 'image1.jpg' },
  { imageUrl: 'image2.jpg' },
  { imageUrl: 'image3.jpg' },
];

const modules = [EffectCoverflow, Pagination];
</script>

EffectCoverflow 主要會讓幻燈片將以 3D 立體效果呈現，為你的輪播增加了視覺吸引力，以下是專屬配置項說明

註(4)：預設樣式是手機板，所以如果在 :slidesPerView=”1” 代表手機板只會出現一個元件，如果有設定斷點就會跟著斷點走，舉例說明：需求方想在小於 1366 只顯示 2 張畫面，1366 以上的時候就出現 4 張，此時可以這樣設定：

<template>
  <swiper
    :slidesPerView="2"
    :breakpoints="{
      '1366': {
        slidesPerView: 4,
        spaceBetween: 10,
      }
    }"
    :modules="modules"
    class="mySwiper"
  >
    <swiper-slide v-for="(item, index) in carouselItems" :key="index">
      <img :src="item.imageUrl" alt="Carousel Image">
    </swiper-slide>
  </swiper>
</template>

- Carousel in Bootstrap5.2

官網文件：Carousel
https://getbootstrap.com/docs/5.3/components/carousel/#autoplaying-carousels-without-controls

先去官方文件，選一個你喜歡的樣式，然後複製在 .vue 組件中，就可以建立一個 Bootstrap 輪播組件。
細節就是：

1. 添加一個 carousel 容器，包裝整個幻燈片組建所需要的東西
2. 在 carousel-inner 容器裡並容納很多張照片或是使用者也可以放一些 card 元件 carousel-item
3. 圖片主要用 d-block 代表 display:block 為佔據一行，與寬度100 w-100
4. 幻燈片動起來可以使用 data-ride 預設是五秒變換一次，如果要變化秒數可以使用 data-interval 單位為毫秒

<template>
  <div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="true" data-bs-interval="3000" ref="carousel">
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="https://images.unsplash.com/photo-1628294896516-344152572ee8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGJicXxlbnwwfDB8MHx8fDI%3D&auto=format&fit=crop&w=600&q=60" class="d-block w-100" alt="bbq1" />
      </div>
      <div class="carousel-item">
        <img src="https://media.istockphoto.com/id/1488379967/photo/chicken-kebabs.webp?b=1&s=170667a&w=0&k=20&c=627-ecVNrYhKt_6tnoD7SLKc55GQdRzkKYRqw5Ae4FA=" class="d-block w-100" alt="bbq2" />
      </div>
      <div class="carousel-item">
        <img src="https://media.istockphoto.com/id/589127624/photo/meat-kebabs-with-vegetables-on-flaming-grill.jpg?s=612x612&w=0&k=20&c=IyJ9EWA1fWa7xNTePVjKx6VtU11H9RrDBlT5ZzDce6g=" class="d-block w-100" alt="bbq3" />
      </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleAutoplaying" data-bs-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="visually-hidden">Next</span>
    </button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import Carousel from 'bootstrap/js/dist/carousel'

let bsCarousel = '';
const carousel = ref(null);
onMounted(() => {
  bsCarousel = new Carousel(carousel.value);
  bsCarousel.interval = 1000
})
</script>

如果在 main.js 沒有引入 Bootstrap 的 JavaScript 檔案，這裡就需要做實體化；在 main.js 有引入 Bootstrap 的 JavaScript 檔案，具體來說是引入 Bootstrap 的捆綁（bundle）版本，上面的實體化就不需要執行

import 'bootstrap/dist/js/bootstrap.bundle.min.js';

展示畫面：
https://codepen.io/mengting-ku/pen/YzdxmwZ

- Carousel 走马灯 in Element Plus

在 Element-plus 中，Carousel（走馬燈）是通過 el-carousel 和 el-carousel-item 元件做出輪播效果，這裡用卡片輪播方式說明：

1. 建立外層建立 <el-carousel> 容器
2. 照片什麼的就放在 <el-carousel-item>

   <template>
     <el-carousel :interval="4000" type="card" height="200px">
       <el-carousel-item v-for="item in 6" :key="item">
         <h3 text="2xl" justify="center">{{ item }}</h3>
       </el-carousel-item>
     </el-carousel>
   </template>
   

3. 如果要做客製化，可以用官網設定的配置項，詳細可以到官網查看，以下主要列出在使用過程中發現很常使用的配置項

   属性名	说明	类型	可选值	默认值
   height	carousel 的高度	string	—	—
   initial-index	初始状态激活的幻灯片的索引，从 0 开始	number	—	0
   trigger	指示器的触发方式	string	hover/click	hover
   autoplay	是否自动切换	boolean	—	true
   interval	自动切换的时间间隔，单位为毫秒	number	—	3000
   loop	是否循环显示	boolean	—	true

- 😲坑：你看不見我，但可以碰到我？Oh~No~ 🙅🏻‍♀️

使用輪播工具如果在 Vue3.js 不是用 v-for 跑迴圈而是給固定資料然後再用 v-show 或 v-if 切換也可以，但是要先確認需求方是否需要過渡效果？
所謂的過渡效果就是切換的時候出現的上一個畫面的殘影，如果需求方不想看到殘影，此時可以用 v-if ，原理是 display: none 會讓整個 DOM 元素不見，這樣就不會有過渡效果！

萬一，我只是說萬一，需求方不要過渡效果切換又一定只能用 v-show 怎麼辦？

這時候可以參考一下 CSS 隱藏方法 visibility: hidden; ，整個 DOM 沒有消失還是佔位，但是他可以把整個輪播 item 看不到也點不到，也不會有過渡效果，所以可以試試看這個方法！

...很像篇幅太長了，大家就依照自己選擇看應用項目吧！個人喜歡 Swiper 套件多些，但是當公司要求用樣式套件的時候，確實很像也要了解一些，但是原理大同小異，希望對大家有幫助！晚安，我們明天見 •‿•