swiper缩略图轮播2

使用vue3+ts完成swiper缩略图的效果,起初以为这个swiper是一个组件就可以完成,但现实是两个swiper做了属性互调,官网上没有描述清楚缩略图是否可以轮播,导致走了很多弯路(获取上图的实例然后操作swiper使其完成走马灯的效果)

1.安装并引入

复制代码

yarn

复制代码

yarn add swiper // 安装swiper依赖

2.在main.ts中引入他的css文件

复制代码

js

复制代码

import "swiper/css"

3.在你所需的页面中引入

复制代码

js

复制代码

<template> <div style="height: 100vh; overflow: hidden"> <swiper class="swiper mySwiper2" :spaceBetween="10" :thumbs="{ swiper: thumbsSwiper }" :modules="modules" :loop="true" :autoplay="true" :navigation="true" > <swiper-slide v-for="(item, index) of slides" :key="index"> <img class="img" :src="item" @click="toDetail" /> </swiper-slide> </swiper> <swiper @swiper="setThumbsSwiper" :spaceBetween="10" class="swiper mySwiper" :slidesPerView="4" :watchSlidesProgress="true" :modules="modules" :autoplay="true" :loop="true" > <swiper-slide v-for="(item, index) of slides" :key="index"> <img class="img" :src="item" /> </swiper-slide> </swiper> </div> </template> <script setup lang="ts"> import { ref, reactive } from "vue"; import { Swiper, SwiperSlide } from "swiper/vue"; import "swiper/css"; import "swiper/css/free-mode"; import "swiper/css/navigation"; import "swiper/css/pagination"; import "swiper/css/thumbs"; import { Thumbs, Navigation, Autoplay, Zoom, FreeMode } from "swiper/modules"; const modules = [Thumbs, Navigation, Autoplay, Zoom, FreeMode]; //必须要在这里面引入,只在组件定义的属性不生效,前面这里面没有定义autoPlay导致我的组件轮播不了,一度以为是swiper没有支持缩略图轮播 import { useRouter } from "vue-router"; const slides = reactive([ new URL("@/assets/images/1.png", import.meta.url).href, new URL("@/assets/images/2.png", import.meta.url).href, new URL("@/assets/images/3.png", import.meta.url).href, new URL("@/assets/images/4.png", import.meta.url).href, new URL("@/assets/images/5.png", import.meta.url).href, new URL("@/assets/images/6.png", import.meta.url).href, new URL("@/assets/images/7.png", import.meta.url).href, new URL("@/assets/images/8.png", import.meta.url).href, ]); const thumbsSwiper = ref<any>(null); const setThumbsSwiper = (swiper: any) => { thumbsSwiper.value = swiper; }; const router = useRouter(); const toDetail = () => { router.push("/detail"); }; </script> <style scoped lang="less"> .swiper { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } :deep(.swiper-button-prev, .swiper-button-next) { color: #04af85; } :deep(.swiper-button-next) { color: #04af85; } body { background: #000; color: #000; } .swiper { width: 100%; height: 300px; margin-left: auto; margin-right: auto; } .swiper-slide { background-size: cover; background-position: center; cursor: pointer; } .mySwiper2 { height: 80%; width: 100%; } .mySwiper { height: 20%; box-sizing: border-box; padding: 10px 0; background-color: #000; } .mySwiper .swiper-slide { width: 25%; height: 100%; opacity: 0.4; } .mySwiper .swiper-slide-thumb-active { opacity: 1; } .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } </style>

注:自己写的自动轮播效果

复制代码

js

复制代码

// 在topSwiper引入activeIndexChange选中时间方法 @activeIndexChange="resetTimer" // 在topSwiper中获取实例 @swiper="setSwiper($event)" const setSwiper = (swiperInstance: any) => { swiperdata.value = swiperInstance } // 获取实例使用实例内嵌的slideTo方法切换 const goToNextSlide = () => { if (swiperdata.value) { const nextIndex = (swiperdata.value.activeIndex + 1) % slides.length // 获取当前页的下一个图片的索引 swiperdata.value.slideTo(nextIndex) // 选中当前页的下一个图片 } } //写的一个时间函数 const timer = ref<any>(null) //在图片选中状态会移除,重新再生成一个,避免用户点击或者滑动查看某一项时间未重置的问题 const resetTimer = () => { if (timer) clearInterval(timer.value) timer.value = setInterval(() => { goToNextSlide() }, 5000) } //最后在页面挂载后调用 resetTimer()

相关推荐
用户3802258598241 分钟前
vue3源码解析:响应式机制
前端·vue.js
bo521003 分钟前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
普通程序员9 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
山有木兮木有枝_11 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
流口水的兔子13 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a16 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js
呆呆的心16 分钟前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔
前端·微信·面试
heartmoonq18 分钟前
深入理解 Vue 3 响应式系统原理:Proxy、Track 与 Trigger 的协奏曲
前端
独立开阀者_FwtCoder42 分钟前
放弃 JSON.parse(JSON.stringify()) 吧!试试现代深拷贝!
前端·javascript·github
爱喝水的小周2 小时前
AJAX vs axios vs fetch
前端·javascript·ajax