vue-awesome-swiper实现组件化swiper

最新推荐文章于 2024-08-19 09:36:01 发布

阡陌路人

最新推荐文章于 2024-08-19 09:36:01 发布

阅读量703

点赞数

分类专栏： vue前端框架文章标签： javascript sass vue.js

本文链接：https://blog.csdn.net/Iwokei/article/details/104757303

版权

本文介绍了如何在Vue项目中使用vue-awesome-swiper创建组件化的轮播图。首先，通过npm安装插件并引入到main.js中。接着，展示了一个基本的swiper组件结构，包括在App.vue中的应用。然后，详细说明了几个关键属性，如autoplay、loop、grabCursor、direction、pagination等，以及如何自定义分页器样式。最后，展示了在main.js中注册slider模块，并在其他组件中如何使用该模块，接收内容数组并应用特定样式。

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

vue-awesome-swiper

在vue项目中可以使用vue-awesome-swiper来创建swiper组件。

github地址

案例：vue轮播图

安装vue-awesome-swiper插件，npm i vue-awesome-swiper ，安装完后package.json中有了vue-awesome-swiper

"dependencies": {
   
    "vue": "^2.5.2",
    "vue-awesome-swiper": "^3.1.3"
}

在main.js中引用。

import Vue from 'vue'
import App from './App'


import vueSwiper from 'vue-awesome-swiper'    //引入vue-awesome-swiper
import 'swiper/dist/css/swiper.css'    //引入样式

Vue.config.productionTip = false

Vue.use(vueSwiper)    // 使用插件


/* eslint-disable no-new */
new Vue({
   
  el: '#app',
  components: {
    App },
  template: '<App/>'
})

swiper的基本结构为：

 <swiper>
        <swiper-slide class="swiper-slide"></swiper-slide>
 </swiper>

在App.vue中实现：

<template>
  <div id="app">
    <div>
      <swiper>
        <swiper-slide class="swiper-slide" v-for="item in slide" :key="item">
          我是第{
   {
   item}}个轮播图
        <