Vue 滑动的插件

最新推荐文章于 2024-06-23 09:35:52 发布

2401_84868241

最新推荐文章于 2024-06-23 09:35:52 发布

阅读量149

点赞数 2

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

本文链接：https://blog.csdn.net/2401_84868241/article/details/138800286

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、npm 安装

npm install vue-awesome-swiper swiper --save

2、引入

// 引入 Swiper 组件和样式  
import { swiper, swiperSlide } from 'vue-awesome-swiper'  
import 'swiper/swiper-bundle.css'  
  
// 在你的 Vue 组件中注册 swiper 和 swiperSlide  
export default {  
  components: {  
    swiper,  
    swiperSlide  
  },  
  // ...  
}

3、使用

<template>  
  <swiper :options="swiperOptions">  
    <swiper-slide>Slide 1</swiper-slide>  
    <swiper-slide>Slide 2</swiper-slide>  
    <swiper-slide>Slide 3</swiper-slide>  
    <!-- 其他滑块 -->  
  </swiper>  
</template>  
  
<script>  
export default {  
  // ...  
  data() {  
    return {  
      swiperOptions: {  
        // Swiper 的配置项  
        slidesPerView: 1,  
        spaceBetween: 30,  
        // 其他配置项...  
      },  
    };  
  },  
  // ...  
};  
</script>