Vue+Vite使用Swiper8

最新推荐文章于 2025-11-17 13:36:33 发布

原创最新推荐文章于 2025-11-17 13:36:33 发布 · 1.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中使用Swiper8，详细阐述了安装过程、组件引入、使用方法以及样式的调整，提供了完整的Vue代码示例，包括在setup composition API中的应用。

官方中文文档：https://www.swiper.com.cn/

文章目录

前言
一、安装
二、使用步骤
三、完整示例代码
- 1.Vue
- 2.setup composition API

前言

本文使用的Swiper8 Vue.js 组件，

Swiper常用于移动端网站的内容触摸滑动。

提示：最底部有setup中使用示例

一、安装

npm i swiper

本次使用的版本未指定，默认安装了8.3.2
在这里插入图片描述

二、使用步骤

1.引入组件

  // 引入Swiper Vue.js 组件
  import { Swiper, SwiperSlide } from 'swiper/vue';
  // 引入所需模块
  import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
  
  // 引入 Swiper 样式
  import 'swiper/css';
  // 小圆点
  import 'swiper/css/pagination' 
  // 左右箭头
  import 'swiper/css/navigation' 
  // 轮播图的滚动条
  import 'swiper/css/scrollbar'

2.使用组件

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    :autoplay="{ autoplay: 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>

3.样式调整

代码如下（示例）：

<style lang="less">
.swiper {
      .swiper-slide {
        height: 200px;
      }
    }
</style>

此处宽高随意调整，如需调整左右箭头，属性样式.swiper-button-prev,.swiper-button-next

三、完整示例代码

1.Vue

Vue完整代码如下（示例）：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    :autoplay="{ autoplay: 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 Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper';

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

  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, Autoplay],
      };
    },
  };
</script>

<style lang="less">
.swiper {
      .swiper-slide {
        height: 200px;
      }
    }
</style>

2.setup composition API

在setup composition API中使用：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    :autoplay="{ autoplay: 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 setup>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';
// import Swiper core and required modules
import { Navigation, Pagination, Scrollbar, Autoplay } from 'swiper';

// Import Swiper styles
import "swiper/css";
// 小圆点
import 'swiper/css/pagination' 
// 左右箭头
import 'swiper/css/navigation' 
// 轮播图的滚动条
import 'swiper/css/scrollbar'

const modules = [Navigation, Pagination, Scrollbar, Autoplay ];

const onSwiper = (swiper) => {
  console.log(swiper);
};
const onSlideChange = () => {
  console.log("slide change");
};
</script>

<style lang="less">
.swiper {
      .swiper-slide {
        height: 200px;
      }
    }
</style>