10 分钟搞定 Swiper 轮播图：轻松打造高颜值网页

陈三心

于 2025-02-28 23:17:56 发布

阅读量1.7k

点赞数 94

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43288600/article/details/145915547

版权

vue 专栏收录该内容

12 篇文章

订阅专栏

前言

📫 大家好，我是陈三心，热爱技术和分享，欢迎大家交流，一起学习进步！

🍅 个人主页：陈三心

轮播图（Carousel）是现代网页设计中常见的组件，用于展示图片、广告或内容。Swiper 是一个功能强大且灵活的轮播图库，支持多种效果和配置，广泛应用于各种网站和应用程序中。本文就来分享下 Swiper 的常用配置，帮助你快速上手并实现个性化的轮播图效果。

Swiper 简介

Swiper 是一款免费开源的轮播图库，具有以下特点：

功能丰富：支持水平、垂直、3D 翻转等多种轮播效果。
易于使用：提供详细的文档和大量示例，适合初学者和高级开发者。
高度可定制：通过配置选项和插件，可以满足各种需求。

基本使用

安装引入

安装 Swiper 依赖并引入。

npm install swiper

// 导入 Swiper 核心库和样式
import Swiper from 'swiper';
import 'swiper/css';

默认情况下，Swiper 仅导出核心版本，不包含其他模块（如导航、分页等）。因此，还需要导入并配置它们：

// 导入 Swiper 核心库以及导航（Navigation）和分页（Pagination）模块
import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';

// 导入 Swiper 核心样式以及导航和分页模块的样式
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

// 初始化 Swiper
const swiper = new Swiper('.swiper', {
  // 配置 Swiper 使用的模块
  modules: [Navigation, Pagination], // 使用导航和分页模块
  // 其他配置项
  ...
});

如果您想要导入 Swiper 及其所有模块（包），那么应该从以下位置导入swiper/bundle：

// 导入 Swiper 完整包（包含所有模块）
import Swiper from 'swiper/bundle';

// 导入 Swiper 的完整样式包（包含所有模块的样式）
import 'swiper/css/bundle';

// 初始化 Swiper
const swiper = new Swiper('.swiper', {
  // 在这里配置 Swiper 的选项
  // 例如：direction, loop, pagination, navigation 等
  ...
});

初始化Swiper

添加 Swiper HTML 布局：

<div class="swiper">
    <!-- 额外的必需包装器 -->
    <div class="swiper-wrapper">
        <!-- 幻灯片 -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>

除了Swiper的CSS样式，还需要添加一些自定义样式来设置Swiper大小：

.swiper {
  width: 600px;
  height: 300px;
}

在JS中初始化Swiper：

const swiper = new Swiper(".swiper", {
    modules: [Navigation, Pagination],
    // 可选参数
    direction: "horizontal", // 轮播方向为水平
    loop: true, // 启用循环播放

    // 分页器
    pagination: {
        el: ".swiper-pagination", 
    },

    // 导航箭头
    navigation: {
        nextEl: ".swiper-button-next", // 下一个按钮的元素选择器
        prevEl: ".swiper-button-prev", // 上一个按钮的元素选择器
    },

    // 滚动条
    scrollbar: {
        el: ".swiper-scrollbar", 
    },
});

使用示例

<template>
  <div class="swiper">
    <!-- Swiper 容器 -->
    <div class="swiper-wrapper">
      <!-- 幻灯片 -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>

    <!-- 分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- 滚动条 -->
    <div class="swiper-scrollbar"></div>
  </div>
</template>

<script>
// 导入 Swiper 核心库和样式
import Swiper from "swiper/bundle";
import "swiper/css/bundle";

export default {
  mounted() {
    // 初始化 Swiper
    new Swiper(".swiper", {
      // 轮播方向为水平
      direction: "horizontal",
      // 启用循环播放
      loop: true,

      // 分页器配置
      pagination: {
        el: ".swiper-pagination",
      },

      // 导航按钮配置
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },

      // 滚动条配置
      scrollbar: {
        el: ".swiper-scrollbar",
      },
    });
  },
};
</script>

<style scoped>
.swiper {
  width: 600px; /* 轮播容器宽度 */
  height: 300px; /* 轮播容器高度 */
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  background-color: #ccc;
}
</style>

效果如下：

常用配置

Swiper 提供了丰富的配置选项，以下是一些常用的配置：

轮播方向

direction：设置轮播方向。
- 'horizontal'：水平轮播（默认）。
- 'vertical'：垂直轮播。

direction: 'horizontal', // 水平轮播

循环播放

loop：启用循环播放。
- true：启用循环。
- false：禁用循环。

loop: true, // 启用循环播放

自动播放

autoplay：配置自动播放。
- delay：切换间隔时间（毫秒）
- disableOnInteraction：用户操作后是否停止自动播放。

autoplay: {
  delay: 3000, // 每隔 3 秒切换一次
  disableOnInteraction: false, // 用户操作后继续自动播放
},

分页器

pagination：配置分页器。
- el：分页器的容器选择器。
- clickable：分页器是否可以点击切换。

pagination: {
  el: '.swiper-pagination', // 分页器容器
  clickable: true, // 分页器可点击
},

导航按钮

navigation：配置导航按钮。
- nextEl：下一个按钮的选择器。
- prevEl：上一个按钮的选择器。

navigation: {
  nextEl: '.swiper-button-next', // 下一个按钮
  prevEl: '.swiper-button-prev', // 上一个按钮
},

滚动条

scrollbar：配置滚动条。
- el：滚动条的容器选择器。
- draggable：滚动条是否可拖动。

scrollbar: {
  el: '.swiper-scrollbar', // 滚动条容器
  draggable: true, // 滚动条可拖动
},

幻灯片数量

slidesPerView：设置同时显示的幻灯片数量。
- 数字：显示指定数量的幻灯片。
- 'auto'：根据容器宽度自动调整。

slidesPerView: 3, // 同时显示 3 张幻灯片

幻灯片间距

spaceBetween：设置幻灯片之间的间距（像素）。

spaceBetween: 30, // 幻灯片间距为 30px

响应式布局

breakpoints：根据屏幕宽度设置不同的配置。

breakpoints: {
  640: { // 当屏幕宽度 >= 640px
    slidesPerView: 2,
    spaceBetween: 20,
  },
  1024: { // 当屏幕宽度 >= 1024px
    slidesPerView: 3,
    spaceBetween: 30,
  },
},

动态幻灯片

dynamicBullets：动态分页器，适用于大量幻灯片。

pagination: {
  el: '.swiper-pagination',
  dynamicBullets: true, // 启用动态分页器
},

封装组件

为了提高代码的复用性，可以将其封装成一个通用图片组件。

在 src/components 目录下创建 Carousel.vue 文件，编写以下代码：

<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(image, index) in images" :key="index">
        <img :src="image" alt="Slide" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
  </div>
</template>

<script>
import Swiper from "swiper/bundle";
import "swiper/css/bundle";

export default {
  props: {
    images: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    new Swiper(".swiper", {
      loop: true,
      autoplay: { delay: 1000 },
      pagination: {
        el: ".swiper-pagination",
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
  },
};
</script>

<style scoped>
.swiper {
  width: 800px;
  height: 400px;
}

.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

使用组件

<template>
  <div id="app">
    <Carousel :images="images" />
  </div>
</template>

<script>
import Carousel from './components/Carousel.vue';

export default {
  components: {
    Carousel,
  },
  data() {
    return {
      images: [
        require("@/assets/images/1.png"),
        require("@/assets/images/2.png"),
        require("@/assets/images/3.png"),
      ],
    };
  },
};
</script>

效果