vue项目使用swiper

最新推荐文章于 2025-05-31 20:13:02 发布

原创最新推荐文章于 2025-05-31 20:13:02 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #swiper

vue 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用swiper组件。首先在package.json中添加vue-awesome-swiper依赖并安装，接着在main.js配置，最后展示slider组件的实现代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、首先在package.json中引入vue-awesome-swiper依赖，然后通过npm install 来安装即可。package.json中如图所示：

2、安装成功后，在main.js中添加如下代码：

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

3、slider组件的内容如下：

<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="(picitem,index) in items" :key="index">
      <img :src="picitem.src" alt="">
    </swiper-slide>
  </swiper>
</template>
<script type="text/ecmascript-6">
  import {swiper, swiperSlider} from 'vue-awesome-swiper'

  export default {
    data() {
      return {
        swiperOption: {
          notNextTick: true,
          loop: true,
          autoplay: true,
          speed: 1000,
          direction: 'horizontal',
          grabCursor: true,
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          mousewheelControl: true,
          observeParents: true,
          debugger: true
        },
        items: [
          {src: 'http://localhost/static/images/1.jpg'},
          {src: 'http://localhost/static/images/2.jpg'},
          {src: 'http://localhost/static/images/3.jpg'},
          {src: 'http://localhost/static/images/4.jpg'},
          {src: 'http://localhost/static/images/5.jpg'}
        ],
      }
    },
    components: {
      swiper,
      swiperSlider
    }
  }
</script>
<style lang="stylus" rel="sheetstylus">

</style>

解释一下：autoplay:true这样可以解决不自动轮播问题。如果想设置滚动的时间，用speed设置相应时间即可。direction可以设置轮播的方向。具体的参数可参考swiper的官网地址：http://www.swiper.com.cn/api/Effects/2015/0308/193.html