vue-awesome-swiper缩略图无法联动的问题

一，安装

npm install vue-awesome-swiper --save
// npm install vue-awesome-swiper@3.x --save

我安装的版本是
“swiper”: “^6.6.1”,
“vue-awesome-swiper”: “^3.1.3”,

在使用vue-awesome-swiper组件的时候，缩略图无法和大图实现联动，百度了半天终于发现了一个解决办法。
官方代码：


<template><div class="thumb-example"><!-- swiper1 --><swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop"><swiper-slide class="slide-1"></swiper-slide><swiper-slide class="slide-2"></swiper-slide><swiper-slide class="slide-3"></swiper-slide><swiper-slide class="slide-4"></swiper-slide><swiper-slide class="slide-5"></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-1"></swiper-slide><swiper-slide class="slide-2"></swiper-slide><swiper-slide class="slide-3"></swiper-slide><swiper-slide class="slide-4"></swiper-slide><swiper-slide class="slide-5"></swiper-slide></swiper></div>
</template><script>import { swiper, swiperSlide } from 'vue-awesome-swiper'// >= Swiper 6.ximport 'swiper/swiper-bundle.css'export default {name: 'swiper-example-thumbs-gallery',title: 'Thumbs gallery with Two-way control',components: {swiper,swiperSlide},data() {return {swiperOptionTop: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev'}},swiperOptionThumbs: {loop: true,loopedSlides: 5, // looped slides should be the samespaceBetween: 10,centeredSlides: true,slidesPerView: 'auto',touchRatio: 0.2,slideToClickedSlide: true}}},mounted() {this.$nextTick(() => {const swiperTop = this.$refs.swiperTop.$swiperconst swiperThumbs = this.$refs.swiperThumbs.$swiperswiperTop.controller.control = swiperThumbsswiperThumbs.controller.control = swiperTop})}}
</script><style lang="scss" scoped>.thumb-example {height: 480px;background-color: #000;}.swiper {.swiper-slide {background-size: cover;background-position: center;&.slide-1 {background-image:url('~@/assets/img/nature1.jpg');}&.slide-2 {background-image:url('~@/assets/img/nature2.jpg');}&.slide-3 {background-image:url('~@/assets/img/nature4.jpg');}&.slide-4 {background-image:url('~@/assets/img/nature5.jpg');}&.slide-5 {background-image:url('~@/assets/img/nature6.jpg');}}&.gallery-top {height: 80%;width: 100%;}&.gallery-thumbs {height: 20%;box-sizing: border-box;padding: 10px 0;}&.gallery-thumbs .swiper-slide {width: 25%;height: 100%;opacity: 0.4;}&.gallery-thumbs .swiper-slide-active {opacity: 1;}}
</style>

将mounted中的代码进行修改：

const swiperTop = this.$refs.swiperTop.$el.swiper
const swiperThumbs = this.$refs.swiperThumbs.$el.swiper

vue-awesome-swiper缩略图无法联动的问题相关推荐

html中间大两边小轮播代码,vue使用swiper实现中间大两边小的轮播图效果
项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swipe ...
Vue使用Swiper看这一篇就够了
Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时的事件丢失问题 swiper鼠标移入/移出暂停/开 ...
基于vue开发的多条件联动筛选特效（类似京东/淘宝/中国移动）
基于vue实现的多条件联动筛选功能(类似中国移动商城),选中,反选,删除功能. UI库用的ivew 先来张实现的效果图展开时候的效果收起时候的效果代码如下: 1. html(用了iview的UI ...
vue下拉el-select二级联动
vue下拉el-select二级联动 <el-selectv-model="departmentid"placeholder="请选择部门"@change ...
基于vue实现精妙绝伦的三级联动
基于vue实现精妙绝伦的三级联动 ps:笔者为初学者,自己想的不容易,别喷我 <template><view class="index"><!-- 三 ...
vue 使用swiper详细步骤
首先请参考下边这个连接,安装正确的swiper 特别说明一定是vue3,vue2使用是会报错的 vue3 中使用 swiper_@swiper_jjw_zyfx的博客-CSDN博客其次: <t ...
vue实现下拉二级联动_vue 实现二级联动
因项目需要,最近用vue写了个二级联动,刚开始用vue不熟悉,收集了两种方法,这也是我借鉴别人的文章和思路才写出来的,其实没什么区别,可以参考下: 第一种: 这是第一种方法的html部分代码: {{y ...
html锚点反向联动,vue 实现导航锚点联动
import jQuery from 'jquery' export default { data() { return { allMenuList: [ { id: 1, name: '导航', c ...
Vue使用better-scroll左右菜单联动
说明最近想做一个vue商城小项目,练习一下vue的语法,刚刚好碰到了需要左右菜单实现联动,因此就接触了 better-scroll. github地址中文文档. 代码页面结构以及数据 //页面结 ...

vue-awesome-swiper缩略图无法联动的问题

vue-awesome-swiper缩略图无法联动的问题相关推荐

最新文章

热门文章