vue3.2中使用swiper缩略图轮播教程

最新推荐文章于 2024-07-19 16:03:43 发布

发呆的薇薇°

最新推荐文章于 2024-07-19 16:03:43 发布

阅读量1.6k

点赞数 1

分类专栏： Swiper Vue3.2 文章标签： vue3 swiper 缩略图轮播

本文链接：https://blog.csdn.net/Shivy_/article/details/129142405

版权

本文将指导你如何在Vue3.2项目中利用Swiper组件创建带有缩略图的轮播效果。通过安装Swiper，引入并使用相关模块，结合媒体查询实现不同屏幕尺寸的适配。

摘要由CSDN通过智能技术生成

介绍

在vue3 中使用 swiper 实现缩略图的轮播图效果，具体如下图所示：
在这里插入图片描述

使用

切换到项目终端，输入命令 npm install swiper --save , 进行安装
在 main.js里，引入 swiper.css并使用，具体代码如下；

import {
    createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueAwesomeSwiper from 'vue-awesome-swiper';
import 'swiper/css';
createApp(App).use(VueAwesomeSwiper).use(router).mount('#app')

在页面里使用，导入相关的模块即可（swiper的模块导入使用相关，可以翻看上篇关于swiper的使用教程，那篇有完整记载）。这里的轮播我做了小屏幕的兼容，很简单，使用媒体查询，完整代码如下：

<template>
  <div class="index">
    <div class="banner-box" id="banner-box">
      <swiper
        :modules="modules"
        :space-between="10"
        :loop="true"
        :autoplay="{ delay: 4000