vue实现带缩略图的轮播图(vue-awesome-swiper)

demo 请复制打开  https://download.lllomh.com/cliect/#/product/E125504451206525  如点击链接跳转失败请复制网址到浏览器打开

1.引入swiper和vue-awesome-swiper插件

npm install swiper@4 --save
npm install vue-awesome-swiper@3 --save

2.在main.js中引入:

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

3.使用:
template:布局

<template>
  <div>
    <div class="thumb-example">
      <!-- swiper1 -->
      <swiper
              class="swiper gallery-top"
              :options="swiperOptionTop"
              ref="swiperTop"
      >
        <swiper-slide class="slide-1" v-for="item in bigImg" :key="item.id">
          <img :src="item.url" style="height:570px;width:100%" alt="" />
        </swiper-slide>
        <div
                class="swiper-button-next swiper-button-white"
                slot="button-next"
        ></div>
        <div
                class="swiper-button-prev swiper-button-white"
                slot="button-prev"
        ></div>
      </swiper>
      <!-- swiper2 Thumbs -->
      <swiper
              class="swiper gallery-thumbs"
              :options="swiperOptionThumbs"
              ref="swiperThumbs"
      >
        <swiper-slide
                class="slide"
                style="width:100px;height:100px;"
                v-for="item in bigImg"
                :key="item.id"
        >
          <img style="width:100px;height:100px;" :src="item.url" alt="" />
        </swiper-slide>
        <div class="swiper-button-next swiper-button-white" slot="button-next">
          <div>
            <img src="../assets/ArtIcon-offs.svg" alt="" />
          </div>
        </div>
        <div class="swiper-button-prev swiper-button-white" slot="button-prev">
          <div>
            <img src="../assets/ArtIcon-offs.svg" alt="" />
          </div>
        </div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 实现swiper双向控制
    this.$nextTick(() => {
      const swiperTop = this.$refs.swiperTop.swiper
      const swiperThumbs = this.$refs.swiperThumbs.swiper
      swiperTop.controller.control = swiperThumbs
      swiperThumbs.controller.control = swiperTop
    })
  },
  data() {
    return {
      //轮播大图配置
      bigImg: [
        {
          url: 'https://bhw.lllomh.com/images/02.jpg',
          id: 0
        },
        {
          url: 'https://bhw.lllomh.com/images/01.jpg',
          id: 1
        },
        {
          url: 'https://bhw.lllomh.com/images/03.jpg',
          id: 2
        },
        {
          url: 'https://bhw.lllomh.com/images/04.jpg',
          id: 3
        }
      ],
      swiperOptionTop: {
        zoom: true,
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        observer: true, //修改swiper自己或子元素时,自动初始化swiper
        observeParents: true, //修改swiper的父元素时,自动初始化swiper
        // autoplay: {  //自动轮播
        //   delay: 2000,
        //   disableOnInteraction: false
        // },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      swiperOptionThumbs: {
        loop: true,
        loopedSlides: 5, // looped slides should be the same
        spaceBetween: 10,
        centeredSlides: true,
        slidesPerView: 'auto',
        touchRatio: 0.2,
        slideToClickedSlide: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },

  methods: {}
}
</script>

4.scss or sass

<style lang="scss" scoped>
h3 {
  margin: 20px 0 0 10px;
}
.thumb-example {
  width: 864px;
  margin-top: 20px;
  // background: #000;
}
.swiper-slide {
  background-size: cover;
  background-position: center;
}
.gallery-top {
  // height: 80% !important;
  height: 600px;
  width: 100%;
}
.gallery-thumbs {
  height: 20% !important;
  box-sizing: border-box;
  padding: 10px 0px;
  width: 864px;
  margin-left: 2px;
  .swiper-button-next {
    right: 0px;
  }
  .swiper-button-prev {
    left: 0px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    background: #fff;
    width: 45px;
    text-align: center;
    height: 101px;
    top: 26%;
    div {
      margin-top: 30px;
      background: rgb(207, 205, 205);
      height: 45px;
      border-radius: 50%;
      img {
        margin: 7px 0 0 2px;
        width: 30px;
      }
    }
  }
  .swiper-button-next:hover div {
    background: rgb(189, 186, 186);
  }
  .swiper-button-prev:hover div {
    background: rgb(189, 186, 186);
  }
}
.gallery-thumbs .swiper-slide {
  width: 20%;
  height: 80px;
  // opacity: 0.4;
}
.gallery-thumbs .swiper-slide-active {
  border: 2px solid red;
}
</style>

这样就可以了,demo 例子:  如点击链接跳转失败请复制网址到浏览器打开Integrated shopping mallicon-default.png?t=N7T8https://download.lllomh.com/cliect/#/product/E125504451206525

 效果:

原文地址: https://www.lllomh.com/article/details?id=135838963 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/370768.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue插槽

1.插槽使用 正常渲染子组件时&#xff0c;如果子组件的起始标签和闭合标签内有内容&#xff0c;内容是无法被渲染出来的&#xff0c;如下图&#xff1a; // Son.vue <template><div>子组件</div> </template>// Parent.vue<Son>123123123</S…

vue3 之 项目创建

1.使用create-vue创建项目 前提环境条件 已安装 16.0 或更高版本的 Node.js 创建一个Vue应用 npm init vuelatest 这一指令将会安装并执行 create-vue 2.熟悉项目目录和关键文件

【数据结构与算法】(5)基础数据结构之队列 链表实现、环形数组实现详细代码示例讲解

目录 2.4 队列1) 概述2) 链表实现3) 环形数组实现 2.4 队列 1) 概述 计算机科学中&#xff0c;queue 是以顺序的方式维护的一组数据集合&#xff0c;在一端添加数据&#xff0c;从另一端移除数据。习惯来说&#xff0c;添加的一端称为尾&#xff0c;移除的一端称为头&#xf…

STM32学习笔记(五) —— 按键翻转LED

前面我们分析过GPIO的各个寄存器&#xff0c;探讨了如何使用GPIO点亮LED&#xff0c;这里再验证一下GPIO的输入功能 1.硬件连接 我们在开发板上将按键连接到了PA0引脚&#xff0c;按键外接了上拉电阻&#xff0c;默认状态下PA0引脚处于高电平&#xff0c;当按键按下&#xff0…

七月论文审稿GPT第2.5版:微调GPT3.5 turbo 16K和llama2 13B以扩大对GPT4的优势

前言 我司自去年7月份成立大模型项目团队以来&#xff0c;至今已有5个项目组&#xff0c;其中 第一个项目组的AIGC模特生成系统已经上线在七月官网第二项目组的论文审稿GPT则将在今年3 4月份对外上线发布第三项目组的RAG知识库问答第1版则在春节之前已就绪至于第四、第五项目…

【stm32】hal库学习笔记-ADC模数转换(超详细!)

【stm32】hal库学习笔记-ADC模数转换&#xff08;超详细&#xff01;&#xff09; 本篇章介绍了ADC实现电压检测的三种方式 ADC原理及选型 ADC将连续的模拟电压信号转换为二进制的数字信号 选型参数 速度&#xff08;采样频率&#xff09; 功耗 精度 转换原理 ADC hal库驱…

一、Redis之NoSQL

1.1 什么是NoSQL NoSQL&#xff08;Not Only SQL&#xff09;即不仅仅是SQL&#xff0c;泛指非关系型的数据库&#xff0c;它可以作为关系型数据库的良好补充。随着互联网web2.0网站的兴起&#xff0c;非关系型的数据库现在成了一个极其热门的新领域&#xff0c;非关系数据库产…

[Linux 进程控制(二)] 写时拷贝 - 进程终止

文章目录 1、写时拷贝2、进程终止2.1 进程退出场景2.1.1 退出码2.1.2 错误码错误码 vs 退出码2.1.3 代码异常终止引入 2.2 进程常见退出方法2.2.1 exit函数2.2.2 _exit函数 本片我们主要来讲进程控制&#xff0c;讲之前我们先把写时拷贝理清&#xff0c;然后再开始讲进程控制。…

图论练习2

内容&#xff1a;路径计数DP&#xff0c;差分约束 最短路计数 题目大意 给一个个点条边的无向无权图&#xff0c;问从出发到其他每个点的最短路有多少条有自环和重边&#xff0c;对答案 解题思路 设边权为1&#xff0c;跑最短路 表示的路径数自环和重边不影…

基于OpenCV灰度图像转GCode的双向扫描实现

基于OpenCV灰度图像转GCode的双向扫描实现 引言激光雕刻简介OpenCV简介实现步骤 1.导入必要的库2. 读取灰度图像3. 图像预处理4. 生成GCode 1. 简化版的双向扫描2. 优化版的双向扫描 5. 保存生成的GCode6. 灰度图像双向扫描代码示例 总结 系列文章 ⭐深入理解G0和G1指令&…

【深入浅出Java性能调优】「底层技术原理体系」详细分析探索Java服务器性能监控Metrics框架的实现原理分析(Dropwizard度量基础案例指南)

深入探索Java服务器性能监控Metrics框架的实现原理分析 前提介绍Dropwizard MetricsDropwizard的特点Dropwizard的开发案例需要引入Maven依赖常用度量类型Meter(每秒请求数为单位测量请求率)定义度量核心MetricRegistry构建对应的Meter指标对象请求标记采样业务方法控制报告器…

利用Excel爬取网页数据

想要获取网页上的表格数据&#xff0c;可以通过Excel自带的功能&#xff0c;从网站导入数据&#xff0c;并且可以实时刷新最新数据。具体步骤如下&#xff1a; 1、新建Excel&#xff0c;打开&#xff0c;选择【数据】-【自网站】 2、在弹出的对话框中输入目标网址&#xff0c;…

Java常用

文章目录 基础基础数据类型内部类Java IOIO多路复用重要概念 Channel **通道**重要概念 Buffer **数据缓存区**重要概念 Selector **选择器** 关键字final 元注解常用接口异常处理ErrorException JVM与虚拟机JVM内存模型本地方法栈虚拟机栈 Stack堆 Heap方法区 Method Area (JD…

JavaSE-项目小结-IP归属地查询(本地IP地址库)

一、项目介绍 1. 背景 IP地址是网络通信中的重要标识&#xff0c;通过分析IP地址的归属地信息&#xff0c;可以帮助我们了解访问来源、用户行为和网络安全等关键信息。例如应用于网站访问日志分析&#xff1a;通过分析访问日志中的IP地址&#xff0c;了解网站访问者的地理位置分…

毫米波雷达在汽车领域的原理、优势和未来趋势

1 毫米波雷达的原理 汽车引入毫米波雷达最初主要是为了实现盲点监测和定距巡航。毫米波实质上是电磁波&#xff0c;其频段位于无线电和可见光、红外线之间&#xff0c;频率范围为10GHz-200GHz。工作原理类似一般雷达&#xff0c;通过发射无线电波并接收回波&#xff0c;利用障…

vscode 无法远程连接waiting the server log

使用版本 报错信息 相关日志 [17:32:59.765] > Waiting for server log... [17:32:59.801] > Waiting for server log... [17:32:59.831] > > * > * Visual Studio Code Server > * > * By using the software, you agree to > * the Visual Studio…

Github开源项目Excalidraw:简洁易用的手绘风格白板工具

Excalidraw是Github上的一个开源项目&#xff0c;它提供了一个简洁易用的手绘图形创建工具&#xff0c;用户可以通过它创建流程图、示意图、架构图和其他各种图形。本文将介绍Excalidraw的特点和功能&#xff0c;并探讨其在技术层面上的优势和扩展能力。 GitHub地址&#xff1a…

Mysql学习记录补充

索引 在无索引情况下&#xff0c;就需要从第一行开始扫描&#xff0c;一直扫描到最后一行&#xff0c;我们称之为 全表扫描&#xff0c;性能很低。 如果我们针对于这张表建立了索引&#xff0c;假设索引结构就是二叉树&#xff0c;那么也就意味着&#xff0c;会对age这个字段…

【数据结构与算法】(8)基础数据结构 之 优先级队列的无序数组实现、有序数组实现、堆实现详细代码示例讲解

目录 2.7 优先级队列1) 无序数组实现2) 有序数组实现3) 堆实现习题E01. 合并多个有序链表-Leetcode 23 2.7 优先级队列 1) 无序数组实现 要点 入队保持顺序出队前找到优先级最高的出队&#xff0c;相当于一次选择排序 public class PriorityQueue1<E extends Priority&g…

Amazon Bedrock ——使用Prompt构建AI软文撰写师的生成式人工智能应用程序

Amazon Bedrock 是一项完全托管的服务&#xff0c;通过单个 API 提供来自 AI21 Labs、Anthropic、Cohere、Meta、Stability AI 和 Amazon 等领先人工智能公司的高性能基础模型&#xff08;FM&#xff09;&#xff0c;以及通过安全性、隐私性和负责任的 AI 构建生成式人工智能应…