vue中使用swiper6.0实现缩略图控制

最新推荐文章于 2024-08-23 16:41:02 发布

why_Because

最新推荐文章于 2024-08-23 16:41:02 发布

阅读量2.5k

点赞数 2

分类专栏：框架文章标签： vue swiper6.0

本文链接：https://blog.csdn.net/qq_41287423/article/details/117363287

版权

本文介绍了如何在Vue项目中使用Swiper6.0库创建一个带有缩略图控制的轮播图。重点在于swiper6.0的样式引入路径的变化以及在main.js中的配置和轮播图组件的编写。

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

实现效果如下：
在这里插入图片描述

swiper6.0的样式引入路径变了！！！

1、npm install swiper

2、main.js 中引入

import '../node_modules/swiper/swiper-bundle.css';   //swiper6.0样式路径
import Swiper, {
    Navigation, Autoplay,Thumbs } from 'swiper'; //相关组件
Swiper.use([ Navigation, Autoplay,Thumbs]);

3、轮播图组件如下：

<template>
    <div class="bannerBox">
      <div class="swiper-container gallery-top">
          <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(item,index) of bigImg" :key="index">
                  <img class="img" :src="item" >
              </div>
          </div>
          <div class="swiper-button-next swiper-button-white">
              <i class="el-icon-arrow-right"></i&g