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
  1

• 页面布局

  
  
  
  
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42
  43
  44
  45
  46
  47
  48
  49
  50
  51
  52
  53
  54
  55
  56
  57
  58
  59
  60
  61
  62
  63
  64
  65
  66
  67
  68
  69
  70
  71
  72
  73
  74
  75
  76
  77
  78
  79
  80