進入畫面如果讓使用者可以看到目前活動的海報或是主打商品，會很容易吸引使用者目光；就像是受到極度驚嚇的瞬間，腦袋會出現的連續畫面，再次清醒都會讓人印象深刻，Swiper 就是運用這樣的概念讓網頁的內容注入生命和神奇。

#套件簡介

對我來說， Swiper 就是一種人生走馬燈，就拿先前準備上戰場 DEMO，在大主管面前點選鏈接突然噴出 500 ，重新整理改噴 404 ，腦袋瞬間閃過無數奇怪的畫面一樣...嗯！我瞬間看到我阿嬤了...
Swiper 就像一位魔法師，能夠創造出令人著迷的滑動特效和幻燈片，把內容變成了一場奇幻的表演，誘惑人眼多在畫面停留幾秒鐘，話不多說，就讓我們一起把網頁上動起來吧！

#安裝流程

進入官網在上方導覽的 Docs 選項中有 Getting Started，點擊後可以看到三種安裝方法，這裡選用 npm 安裝

npm install swiper

Swiper (The Most Modern Mobile Touch Slider)
https://swiperjs.com/

#開始方法

如果在 Vue 3 + Vite 項目中使用 Swiper ，通常情況下不需要在 main.js 中全局引入 Swiper，只需要把 CSS 和 JavaScript 文件直接在 Vue 組件的 <script setup> 區塊中引入，就可以引入並初始化 Swiper 實例。這種方式更具靈活性，畢竟每個組件可以單獨配置和使用 Swiper ，也才不會互相打架。

import Swiper from 'swiper';            // import Swiper JS
import 'swiper/css';                    // import Swiper styles

( 在自己需要掛載 Swiper 的 .vue 中引入套件 )

🤯 如果怎麼開始都不行的時候，可以藉由 Swiper DEMO 來試試看，因為我就是這樣練習的！真的超好用的方法！

1. 點擊以下鏈接，進入 DEMO 頁面

2. 隨意選擇一個你喜歡的

3. 進入編輯畫面，在 scr > App.vue 可以看到自己選擇的範例程式碼

#使用方法

這裡只要依照步驟執行，就可以看到畫面，萬一真的還是不行！就先睡覺，睡醒再重新走上面的 DEMO 流程，就會出現想看到的結果！

1. Swiper 本身會自己撐滿整個版面呈現滿版狀態，所以開發可以按照自己的設計稿在 .scss 的地方給寬高。

   .swiper {
     width: 100%;
     height: 100%;
   }
   

2. 圖片也可以做樣式設定，因為沒有給寬高設定容易造成圖片撐破版面或是其他問題，所以一樣在 .scss 給樣式。

   .swiper-slide img {
     display: block;
     width: 100%;                      // 給圖片寬度
     height: 100%;                     // 給圖片高度
     object-fit: cover;                // 讓圖片剛好填滿 Swiper 的板模
   }
   

3. 然後選一個自己喜歡的 DEMO 創造屬於自己的專案幻燈片吧！以下是依照 DEMO 建立 Swiper 實例，有切換分頁、分頁配置和自動輪播效果，更多內容明天待續...

   <template>
     <swiper
       :loop="true"
       :pagination="{ clickable: true }"
       :navigation="navigation"
       :modules="modules"
       :autoplay="{
         delay: 2000,
         disableOnInteraction: false
       }"
       class="mySwiper"
     >
       <swiper-slide>
        <img
           src="..img1.jpg"
           alt=""
         />
       </swiper-slide>
       ...
       <div class="swiper-button-prev"/>
       <div class="swiper-button-next" />
     </swiper>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import { Swiper, SwiperSlide } from 'swiper/vue'; // Import Swiper Vue.js components
   import 'swiper/css';                              // Import Swiper styles
   import 'swiper/css/navigation';                   // Swiper 底下圓點
   import 'swiper/css/pagination';                   // Swiper 左右箭頭
   import { Autoplay, Navigation, Pagination } from 'swiper/modules'; // import required modules
   
   const modules = ref([Autoplay, Navigation, Pagination]);
   const navigation = ref({
     nextEl: '.swiper-button-next',
     prevEl: '.swiper-button-prev'
   });
   

4. 畫面展示