Vue

Swiper

swiper 安裝

swiper官網

1
npm install swiper --save

swiper 版本11.0.7

main.ts 引入swiper-bundle.css

官網css說明

  • swiper-bundle.css - 所有 Swiper 樣式，包括所有模組樣式（如導覽、分頁等）
  • swiper-bundle.min.css 壓縮的全部Swiper 樣式
檔案node_modules/swiper/swiper-bundle.css另存到@/assets/swiper-bundle.css 並且到main.ts全局加入 
1
import '@/assets/swiper-bundle.css';

SwiperSlide props

  • 是 Swiper 幻燈片內部組件的另一個鉤子，用於獲取幻燈片資料（與 SwiperSlide 插槽道具中的資料相同）
    is one more hook for components inside of Swiper slides to get the slide data (same data as in SwiperSlide slot props)
  • - 元素將會被加入到 swiper-container 的開頭
    - element will be added to the beginning of swiper-container
  • -（預設）- 元素將添加到 swiper-container 的末尾
    (default) - element will be added to the end of swiper-container
  • - 元素將會被加入到 swiper-wrapper 的開頭
    - element will be added to the beginning of swiper-wrapper
  • - 元素將會被加入到 swiper-wrapper 的末尾
    - element will be added to the end of swiper-wrapper
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
<swiper  
:modules="modules"
        :slides-per-view="1"
        :space-between="50"
        :spaceBetween="30"
        :effect="'fade'"
        :loop="true"
        :autoplay="{ delay: 4000, disableOnInteraction: false }"
        
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        :pagination="pagination"
        >
  <swiper-slide>Slide 1 
  
  </swiper-slide>
  <swiper-slide>Slide 2</swiper-slide>
  <template v-slot:container-start><span>Start</span></template>
  <template v-slot:container-end><span>End</span></template>
   <template v-slot:wrapper-start><span>One</span></template>
  <template v-slot:wrapper-end><span>Two</span></template>
</swiper>
</template>

<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Navigation, Scrollbar }from 'swiper/modules'; 

    const modules = [Autoplay, Pagination, Navigation, Scrollbar];
    const pagination ={
          clickable: true,
          renderBullet: function (index:any, className:any) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        }
    const onSwiper = (swiper:any) => {
        console.log(swiper);
    };
    const onSlideChange = () => {
        console.log('slide change');
    };
</script>

swiper參數

swiper參數

參數解釋備註
Pagination控制是否可以點選圓點指示器切換輪播分頁
Navigation 定義左右切換箭頭
Autoplay是否自動輪播{delay: 5000}
loop是否循環播放
slides-per-view 控制一次顯示幾張輪播圖
space-between 輪播圖之間的距離
allya11y 參數或布林值 true 的對象
allowSlideNext設定為 false 以停用滑動到下一個投影片方向（向右或底部） 預設是true
allowTouchMove如果為 false，則切換投影片的唯一方法是使用外部 API 函數，例如 SlidePrev 或 SlideNext預設是true
autoHeight設定為 true ，滑桿包裝器將調整其高度以適應目前活動投影片的高度預設是false
breakpoints允許為不同的響應斷點（螢幕尺寸）設定不同的參數。 並非所有參數都可以在斷點中更改，只有那些不需要不同佈局和邏輯的參數才可以更改，例如slidesPerView、slidesPerGroup、spaceBetween、grid.rows。 諸如loop和effect之類的參數將不起作用 object, 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
breakpoints: {
    320: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    480: {
      slidesPerView: 3,
      spaceBetween: 30
    },
    640: {
      slidesPerView: 4,
      spaceBetween: 40
    }
}
cardsEffect允許為不同的響應斷點（螢幕尺寸）設定不同的參數。 並非所有參數都可以在斷點中更改，只有那些不需要不同佈局和邏輯的參數才可以更改，例如slidesPerView、slidesPerGroup、spaceBetween、grid.rows。 諸如loop和effect之類的參數將不起作用 具有卡片效果參數的對象 
1
2
3
4
effect: 'cards',
cardsEffect: {
    // ...
},
breakpointsBase ase 斷點（測試版）。 可以是窗戶或容器。 如果設定為視窗（預設），則斷點鍵表示視窗寬度。 如果設定為容器，則斷點鍵被視為滑動器容器寬度
centerInsufficientSlides 啟用後，如果幻燈片數量少於slidesPerView，它會將幻燈片居中。 不適合用於循環模式和 grid.rows 預設為false
centeredSlides 如果為 true，則活動投影片將居中，而不是始終位於左側。 預設為false
centeredSlidesBounds 如果為 true，則活動投影片將會居中，而不是在滑桿的開頭和結尾加上間隙。 必需的 centeredSlides：true。 不適合與循環或分頁一起使用 預設為false
containerModifierClass 修飾符CSS類別的開頭，可以根據不同的參數添加到swiper容器中 'swiper-'
controller 具有控制器參數的物件或布林 true 以使用預設設定啟用 控制器 
1
2
3
controller: {
    inverse: true,
},
coverflowEffect 具有 Coverflow 效果參數的物件。 
1
2
3
4
5
effect: 'coverflow',
coverflowEffect: {
    rotate: 30,
    slideShadows: false,
},
createElements 啟用後，Swiper 將自動使用 swiper-wrapper 元素包裹投影片，並將建立啟用的導覽、分頁和捲軸所需的元素（使用各自的 params 物件或布林值 true）） 預設false
creativeEffect 
1
2
3
4
5
6
7
8
9
10
11
effect: 'creative',
creativeEffect: {
    prev: {
    // will set `translateZ(-400px)` on previous slides
    translate: [0, 0, -400],
    },
    next: {
    // will set `translateX(100%)` on next slides
    translate: ['100%', 0, 0],
    },
},
cssMode 預設false 啟用後，它將使用現代 CSS Scroll Snap API。 它不支援 Swiper 的所有功能，但可能會在簡單的配置中帶來更好的效能。 這是啟用時不支援的：
立方體效果
速度參數可能沒有作用 所有與過渡開始/結束相關的事件（請改用slideChange） SlidesPerGroup 的支援有限 模擬觸控沒有效果，用滑鼠「拖曳」不起作用 抵抗沒有任何影響 允許投影片上一頁/下一頁 滑動處理程序 如果您將其與其他效果（尤其是 3D 效果）一起使用，則需要使用
元素包裹投影片的內容。 如果您在投影片上使用任何自訂樣式（例如背景顏色、邊框半徑、邊框等），則應在 swiper-slide-transform 元素上設定它們。 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide">
      <!-- wrap slide content with transform element -->
      <div class="swiper-slide-transform">
        ... slide content ...
      </div>
    </div>
    ...
  </div>
</div>
<script>
const swiper = new Swiper('.swiper', {
   effect: 'flip',
   cssMode: true,
 });
</script>
cubeEffect 具有立方體效果參數的對象 
1
2
3
4
effect: 'cube',
cubeEffect: {
    slideShadows: false,
},
direction 可以是“水平”或“垂直”（對於垂直滑塊）。 
1
'horizontal' | 'vertical'
edgeSwipeDetection string | boolean 預設是false 啟用釋放 Swiper 事件以在應用程式中進行回掃工作。 如果設定為“阻止”，那麼它將阻止系統向後滑動導航。 此功能僅適用於「觸控」事件（而不是指標事件），因此它適用於 iOS/Android 設備，不適用於具有指標（觸控）事件的 Windows 裝置。
edgeSwipeThreshold number:20 從螢幕左邊緣開始釋放觸控事件以便在應用程式中向後滑動的區域（以像素為單位）
effect 過渡效應:'slide', 'fade', 'cube', 'coverflow', 'flip' or 'creative'