swiper在Vue项目中的使用教程_swiper7.0-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43367522/article/details/121841294

本文详细介绍了如何在Vue项目中使用swiper插件，包括版本选择、插件的全局与局部注册方法，以及在HTML和Vue组件中的代码实现。同时，还提供了自定义前进后退按钮和分页器样式的步骤，最后展示了最终效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此文章使用的是swiper7.0以下的版本

"swiper": "^5.4.5",
"vue-awesome-swiper": "^4.1.1",

1.插件下载

npm install swiper vue-awesome-swiper --save

2.注册

全局注册，在main.js文件中

import 'swiper/css/swiper.css'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)

本地注册，在Vue文件的在script中

 import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
 import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

3.代码块

在HTML中

<template>
  <swiper ref="mySwiper" :options="swiperOptions">
    <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>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

在script的data中

swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          renderBullet: function (index, className) {
            return '<span class="' + className + '">' + (index + 1) + "</span>";
          },
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false, // 手动切换之后继续自动轮播
        },
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },

以上完成。

改变前进后退按钮的样式：

--swiper-theme-color: #ff6600;/* 设置Swiper风格 */
    --swiper-navigation-color: #00ff33;/* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;/* 设置按钮大小 */

改变分页器的样式

//分页器类名
.swiper-pagination {
          /* width: 20px; */
          height: 25px;
          //圆点之前的样式类名
          .swiper-pagination-bullet {
             width: 20px;
            height: 20px;
            background-color: #fff;
            opacity: 1;
          }
          //圆点之后的样式类名
          .swiper-pagination-bullet-active {
            width: 20px;
            height: 20px;
            background-color: #ff4848;
          }
          //圆点内数字的样式
          span {
            color: #000;
            line-height: 20px;
            font-size: 16px;
          }
        }