当前位置: 首页 > news >正文

Vue+Swiper实现轮播图效果

效果展示

  • 实现了自带切换按钮在图片外部
  • 实现了自定义的切换按钮

背景

在项目中使用到了轮播图,实现点击上一张下一张时实现循环显示,同时预览两个图片,并加以文字对图片的说明。

设计

使用 Swiper 插件,可以实现当前这个需求。核心代码就两块,一块布局,一块样式。参考官网发现有很多种实现方式,本文选择单页面引入的方式。

也可以选择 **Swiper Element**的形式

文本链接如下:https://swiperjs.com/element

版本

  • Vue 3.3.4

  • Swiper 11.0.4

  • Node 20.9.0

页面代码

如果遇到按钮无法生效,页面样式等问题,排查引入的 CSS 是否正确

  • 安装 Swiper

    npm install swiper
    
  • 页面布局

    
    <template><div class="outbox"><swiperloop="true":modules="modules":slides-per-view="2":space-between="50"navigation:pagination="{ clickable: true }"@swiper="onSwiper"@slideChange="onSlideChange"class="inbox"><swiper-slide><img src="@/images/1.jpg" />第一个</swiper-slide><swiper-slide><img src="@/images/2.jpg" />第二个</swiper-slide><swiper-slide><img src="@/images/3.jpg" />第三个</swiper-slide><swiper-slide><img src="@/images/4.jpg" />第四个</swiper-slide><swiper-slide><img src="@/images/5.jpg" />第五个</swiper-slide></swiper></div><!-- 如果需要导航按钮 --><div class="swiper-button-prev" slot="button-prev" @click='swiperPrev'></div><div class="swiper-button-next" slot="button-next" @click='swiperNext'></div></template>
    <script>// import Swiper core and required modulesimport { Navigation, Pagination, Scrollbar, A11y } from 'swiper/modules';// Import Swiper Vue.js componentsimport { Swiper, SwiperSlide } from 'swiper/vue';// Import Swiper stylesimport 'swiper/css';import 'swiper/css/navigation';import 'swiper/css/pagination';import 'swiper/css/scrollbar';// Import Swiper stylesexport default {components: {Swiper,SwiperSlide,},setup() {const onSwiper = (swiper) => {console.log(swiper);};const onSlideChange = () => {console.log('slide change');};return {onSwiper,onSlideChange,modules: [Navigation, Pagination, Scrollbar, A11y],};},methods: {swiperNext() {const swiper = document.querySelector('.swiper').swiper;swiper.slideNext();},swiperPrev() {const swiper = document.querySelector('.swiper').swiper;swiper.slidePrev();},
    }};
    </script>
    <style>
    .outbox{position: relative;padding: 0 50px;width: 1000px;
    }
    .inbox{margin-top: 50px;position: initial;
    }
    </style>
    
http://www.lryc.cn/news/240199.html

相关文章:

  • 竞赛选题 行人重识别(person reid) - 机器视觉 深度学习 opencv python
  • 解决vue中引入天地图显示不全问题,设置setTimeout即可解决!
  • 【OpenCV实现图像:使用OpenCV进行物体轮廓排序】
  • 【8】Spring Boot 3 集成组件:安全组件 spring security【官网概念篇】
  • UDP中connect的作用
  • Go使用开源库go-excelize操作Excel文件
  • 软件测试个人求职简历该怎么写,模板在这里
  • opencv-Hough 圆环变换
  • 福州大学《嵌入式系统综合设计》实验五:图像裁剪及尺寸变换
  • LLM之Prompt(二):清华提出Prompt 对齐优化技术BPO
  • chatglm3部署使用
  • Android扫码ZXing
  • 求解Beamforming-SOCP(CVX求解)
  • 解决Vue项目的runtime-only转为runtime-compiler
  • hash模式和history模式
  • 聊聊logback的LevelFilter
  • mysql 行转列 GROUP_CONCAT 试验
  • HarmonyOS元服务开发实战—端云一体化开发
  • 【搭环境】装Python3.8 open3d
  • 【C语言】深入解开指针(四)
  • AMEYA360:瑞萨面向高端工业传感器系统推出高精度模拟前端的32位RX MCU
  • 切面Aspect + 策略模式实现待办提醒功能
  • SAP 调取http的x-www-form-urlencoded形式的接口
  • thingsboard3.6的mailConfigTemplateController错误
  • Go语言中获取IP
  • 【Computer Vision Foundation】全球计算机视觉基金会论文网
  • 计网(复习自用)
  • 安徽省广德市选择云轴科技ZStack Cloud云平台建设县级智慧城市
  • 【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 6
  • nuxt3项目修改端口号