Nuxt框架下引入Swiper完成带缩略图照片轮播的黑科技

最新推荐文章于 2025-10-15 14:55:16 发布

原创

最新推荐文章于 2025-10-15 14:55:16 发布 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了如何在Nuxt项目中利用Swiper 4.4.2版本创建带缩略图的照片轮播。首先在`nuxt.config.js`引入Swiper的js和css，接着构建包含轮播图片和缩略图的DOM结构，并定义数据源。然后在`mounted`阶段配置Swiper脚本，并调整样式以适应PC和移动端展示。虽然过程中遇到了自动翻页的问题，最终成功实现了预期效果。

笔者的吐槽 （赶时间请忽略这段文字，直接进入正文 _(:з」∠)_ ）：最近有个项目是基于Nuxt框架，新需求需要新增加一块照片轮播的功能，笔者小白之前用过Swiper插件，感觉还比较好用，一般简单的效果都能实现，于是，按某站点的攻略，开始安装Swiper（npm install swiper)，然后按照文章里基于vue的开发，笔者开始照猫画鼠的try try try之路（用swiper6吧，按攻略1的写法其实是用了swiper3的语法，但是效果无法自动翻页；打算用swiper6的语法呢，发现6只能在vue3以上使用，而nuxt中包含的vue版本是2.x；用vue-awesome-swiper，根据攻略进行了plugins相关配置，创建组件并且进行了封装，结果发现兜兜转转还是老问题，无法自动翻页，最后突然间，头脑中闪过一道闪电 Σ(っ °Д °;)っ原来是这样！！！）

正文

项目背景：依赖包 nuxt、vue-class-component、vue-property-decorator、typescript；

项目需求：完成带有缩略图的图片轮播效果；

方案步骤：

1、在 nuxt.config.js 文件引入swiper js和css包（笔者用的是 4.4.2，代码挂在在cdn上，这里演示就用 url 字样代替具体地址吧）

module.exports = {

    head: {
      link: [
        { rel: 'stylesheet', type: 'text/css', href: '//url/swiper.min.css'}
      ],
      script: [
        { src: '//url/swiper.min.js'}
	  ],
    }
}

2、dom结构，包含轮播部分图片和缩略图两个版块的代码