Vue如何使用vue-awesome-swriper实现异形轮播

最新推荐文章于 2024-03-21 11:03:35 发布

素颜醉倾城

最新推荐文章于 2024-03-21 11:03:35 发布

阅读量2.9k

点赞数 2

本文链接：https://blog.csdn.net/handesomeWriter/article/details/103486472

版权

本文介绍了如何在Vue项目中利用vue-awesome-swiper库实现具有独特布局的轮播图，详细步骤包括安装组件、在main.js配置以及在.vue文件中编写代码。

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

vue 使用swriper（5.0）实现轮播图（slide异形轮播为列）步骤如下：

安装：vue-awesome-swiper

npm / cnpm i vue-awesome-swiper --save

`在入口文件 main.js中执行如下操作

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3，在自己的 .vue文件中代码块

<template>
  <div>
    <swiper :options="swiperOption"  ref="mySwiper">
        <!-- 添加的图片 -->
        <swiper-slide>
          <img class="swiper-slide" src="../../images/gallery/events1.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img class="swiper-slide " src="../../images/gallery/events2.jpg"/>
        </swiper-slide>