vue2项目使用swiper实现轮播效果（超详细）

最新推荐文章于 2024-08-20 08:48:28 发布

Ccousin

最新推荐文章于 2024-08-20 08:48:28 发布

阅读量3.3k

点赞数 3

文章标签： javascript 前端 html

Ccousin

本文链接：https://blog.csdn.net/weixin_47600678/article/details/129367271

版权

本文详述了在Vue2项目中利用Swiper实现轮播效果的步骤，包括安装swiper、在main.js中引入、创建swiper组件及设置相关数据和方法。提供了具体的HTML结构、所需的数据及初始化调用的方法。

摘要由CSDN通过智能技术生成

第一步：安装swiper`

  npm install swiper@4.5.1 --save-dev  // 安装swiper

第二步：在main.js中引入

  //引入swiper
      import 'swiper/dist/css/swiper.min.css'
      import 'swiper/dist/js/swiper.min'

第三步：在component下新建一个名为swiper的组件
其html如下：

<template>

    <div class="container">
      <div class="containerBox">
        <div class=

关注