vue-awesome-swipe 基于vue使用的轮播组件使用(改)

最新推荐文章于 2024-06-27 15:54:11 发布

原创最新推荐文章于 2024-06-27 15:54:11 发布 · 698 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用 vue-awesome-swiper 组件实现轮播效果，包括安装配置、基本用法及自定义样式等内容。

npm install vue-awesome-swiper --save //基于vue使用的轮播组件

<template>
  <swiper :options="swiperOption" ref="mySwiper">
      <swiper-slide v-for="(banner,index) in banners" :key="index">
        <img v-if="banner.src" :src="banner.src">
      </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'

　require('swiper/dist/css/swiper.css')

export default {
  data () {
    return {
      banners: [{ src: require('../img/1.jpg') }, { src: require('../img/4.jpg') }, { src: require('../img/5.jpg') }],
      swiperOption: {
        notNextTick: true,
        autoplay: 1000,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true,
        onSlideChangeEnd: swiper => {
          this.page = swiper.realIndex + 1
          this.index = swiper.realIndex
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  }
}
</script>
<style>

.swiper-slide{
  margin-top: 10px;
  height: 230px;
}

.swiper-slideimg {
  width: 100%;
  height: 100%;
}
</style>