vue Swiper滑块

安装

npm install swiper vue-awesome-swiper --save

 

main.js文件注册。

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

 

要使用的组件里面引入

<template>
  <div class="app">
    <swiper :options="swiperOptions">
      <swiper-slide class="swiper-slide">
        <img style="width:100%;height:100%" src="../assets/img/图片1.jpg"/>
      </swiper-slide>
      <swiper-slide class="swiper-slide">
        <img style="width:100%;height:100%" src="../assets/img/图片2.jpg"/>
      </swiper-slide>
      <!-- 分页器 -->
      <div class="swiper-pagination"  slot="pagination"></div>   
        <!-- 左右箭头 --> 
      <div class="swiper-button-prev" slot="button-prev"></div> 
      <div class="swiper-button-next" slot="button-next"></div> 
    </swiper>
  </div>
</template>
<script>
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

export default {
  data () {
    return {
      swiperOptions:{
        //显示分页
        pagination: {
          el: '.swiper-pagination'
        },
        slidesPerView: 1,
        //设置点击箭头
        navigation: {
          nextEl: '.swiper-button-next', 
          prevEl: '.swiper-button-prev'
        },
        //自动轮播
        autoplay: {
          delay: 2000,
          //当用户滑动图片后继续自动轮播
          disableOnInteraction: false,
        },
        //开启循环模式
        loop: true
      }
    }
  }
}
</script>

<style scoped lang='less'>
  // 图片宽高
  .swiper-slide {
    width: 100%;
    height: 200px;
  }
  // 点击箭头样式
  .swiper-button-prev, .swiper-button-next {
    color: rgba(225, 225, 225, 225);
  }
  // 指示点样式
  .swiper-pagination-bullet-active {
    background: rgba(225, 225, 225, 225) !important;
  }
</style>