記錄--vue3中使用Swiper元件

林恒發表於2024-06-26

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

一，安裝

npm i swiper

二，使用

swiper/vue 匯出 2 個元件：Swiper 和 SwiperSlide

<template>
  <swiper
    :slides-per-view="3"
    :space-between="50"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script lang="ts" setup>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
  // Import Swiper styles
  import 'swiper/css';
  
   const onSwiper = (swiper) => {
        console.log(swiper);
      };
      
  const onSlideChange = () => {
    console.log('slide change');
  };
</script>

預設情況下，Swiper Vue 使用 Swiper 的核心版本（沒有任何附加模組）。如果要使用Navigation、Pagination等模組，必須先安裝它們.

三，Swiper相關擴充套件模組

使用擴充套件模組

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';
 
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
 
  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';
  
   const onSwiper = (swiper) => {
        console.log(swiper);
      };
      
  const onSlideChange = () => {
    console.log('slide change');
  };
  
  const modules = [Navigation, Pagination, Scrollbar, A11y];
 
</script>

請注意，如果您傳遞這些引數而不指定其元素（例如，沒有 navigation.nextEl、pagination.el 等），Swiper Vue 元件將為導航、分頁和捲軸建立所需的元素。

四，樣式

Swiper包包含不同的CSS、Less和SCSS樣式集。

swiper/css - 僅核心 Swiper 樣式
swiper/css/bundle - 所有 Swiper 樣式，包括所有模組樣式（如導航、分頁等）

模組樣式（如果您已經匯入了包樣式則不需要）

swiper/css/a11y 
swiper/css/autoplay 
swiper/css/controller 
swiper/css/effect-cards 
swiper/css/effect-coverflow 
swiper/css/effect-creative 
swiper/css/effect-cube 
swiper/css/effect-fade 
swiper/css/effect-flip 
swiper/css/free-mode 
swiper/css/grid 
swiper/css/hash-navigation 
swiper/css/history 
swiper/css/keyboard 
swiper/css/manipulation 
swiper/css/mousewheel 
swiper/css/navigation 
swiper/css/pagination 
swiper/css/parallax 
swiper/css/scrollbar 
swiper/css/thumbs 
swiper/css/virtual 
swiper/css/zoom

對於 SCSS 樣式，將匯入路徑中的 css 替換為 scss，例如：

import 'swiper/scss';
import 'swiper/scss/navigation';
import 'swiper/scss/pagination';

五，效果

swiper 可以使用以下效果：

Fade
Cube
Coverflow
Flip
Cards
Creative

要使用效果，您必須首先匯入並安裝它們（與所有其他模組一樣）。

<template>
  <swiper :modules="[EffectFade]" effect="fade">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script lang="ts" setup>
  import { EffectFade } from 'swiper/modules';
  import { Swiper, SwiperSlide } from 'swiper/vue';
  import 'swiper/css';
  import 'swiper/css/effect-fade';
</script>

六、使用分頁Pagination

<template>
  <swiper :pagination="pagination" :modules="modules" class="mySwiper">
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide><swiper-slide>Slide 3</swiper-slide>
    <swiper-slide>Slide 4</swiper-slide><swiper-slide>Slide 5</swiper-slide>
    <swiper-slide>Slide 6</swiper-slide><swiper-slide>Slide 7</swiper-slide>
    <swiper-slide>Slide 8</swiper-slide><swiper-slide>Slide 9</swiper-slide>
  </swiper>
</template>
<script>
  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
 
  // 引入swiper樣式，對應css 如果使用less或者css只需要把scss改為對應的即可
import 'swiper/css';
import 'swiper/css/bundle';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-fade';
 
  // import required modules
  import { Pagination } from 'swiper/modules';
 
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      return {
        pagination: {
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + '</span>';
          },
        },
        modules: [Pagination],
      };
    },
  };
</script>

樣式效果如下：