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
    
  • 页面布局

    
    
    
    
    

你可能感兴趣的:(前端,vue.js)