vue3中使用Swiper组件

一，安装

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相关扩展模块

模块名称	描述
Virtual	Virtual Slides module，用于创建虚拟幻灯片。
Keyboard	Keyboard Control module，通过键盘控制幻灯片的切换。
Mousewheel	Mousewheel Control module，通过鼠标滚轮控制幻灯片的切换。
Navigation	Navigation module，提供导航按钮以控制幻灯片的切换。
Pagination	Pagination module，提供分页器以控制幻灯片的切换。
Scrollbar	Scrollbar module，提供滚动条以控制幻灯片的滚动。
Parallax	Parallax module，创建具有透视效果的幻灯片背景。
FreeMode	Free Mode module，允许自由拖动和缩放幻灯片。
Grid	Grid module，将幻灯片组织成网格布局。
Manipulation	Slides manipulation module，提供对幻灯片的各种操作和调整功能。

模块名称	描述
Zoom	Zoom module，用于实现缩放功能
Controller	Controller module，用于控制视频播放、暂停等操作
A11y	Accessibility module，提高应用程序的可访问性，使残障人士也能方便地使用应用程序
History	History Navigation module，用于实现历史记录的导航功能
HashNavigation	Hash Navigation module，通过URL的哈希部分实现页面的导航功能
Autoplay	Autoplay module，用于实现自动播放功能
EffectFade	Fade Effect module，实现淡入淡出效果
EffectCube	Cube Effect module，实现立方体旋转效果
EffectFlip	Flip Effect module，实现翻页效果
EffectCoverflow	Cover Effect module，实现覆盖层效果
EffectCards	Cards Effect module
EffectCreative	Creative Effect module
Thumbs	Thumbs module

使用扩展模块

<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>

样式效果如下：

 

 

参考：swiper官网