Vue【swiper的使用】

安装

npm install vue-awesome-swiper --save

全局配置

import Vue from 'vue'

//挂载swiper
import VueAwesomeSwiper from 'vue-awesome-swiper';

Vue.use(VueAwesomeSwiper);

局部引入 要使用的组件中

import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'

components: {
  Swiper,
  SwiperSlide
}

组件中使用

//HTML部分
<template>
  <div>
  <swiper ref="mySwiper" :options="swiperOptions" style="width:80%;margin:0 auto">
    <swiper-slide v-for="item of swiperList" :key="item.id">
      <img style="width:500px;height:500px" :src='item.imgUrl' />
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</div>
</template>
<script>
//引入
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
//JS部分
export default {
  name:'banner',
  components:{
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      swiperOptions: {
        //自动播放设置
        autoplay: true,
        //图片下面有小圆点，代表到哪一张图片
        pagination: {
          el: '.swiper-pagination'
        },
        //分页的切换设置
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        //下面这三个是图片的轮播展示效果
        // effect: 'coverflow',
        // slidesPerView: 3,
        // centeredSlides: true,
        direction : 'horizontal',
      },
      //具体数据
      swiperList:[
                    {
                        id:'001',
                        imgUrl:"https://i1.ygimg.cn/pics/mobile/homepage/2020/05/1588838565774.jpg"
                    },
                    {
                        id:'002',
                        imgUrl:"http://img1.qunarzz.com/piao/fusion/1805/f1/e57bc93226317102.jpg_750x200_9ab37bd0.jpg"
                    },
                    {
                        id:'003',
                        imgUrl:"https://i1.ygimg.cn/pics/mobile/homepage/2020/05/1588838565774.jpg"
                    }
                ]
    }
  }
}
</script>

//样式设置
<style scoped>
.swiper-container {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: #00ff33; /* 单独设置按钮颜色 */
  --swiper-navigation-size: 50px; /* 设置按钮大小 */
}
</style>