轮播图使用swiper

组件方式使用

安装插件

使用组件方式，需要安装两个插件，并且两者版本对应很重要，还有其他版本组合，此处不唯一。

页面中使用

<template>
  <div class="container">
    <div style="position: relative;width: 800px">
      <swiper class="swiper" :options="swiperOptions">
        <swiper-slide class="slide" v-for="(item,index) in arr" :key="index" >
          <img :src="item.src" alt="" style="width: 100%;height: 100%"/>
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination" ></div>   <!--分页器-->
      <div class="swiper-button swiper-button-prev"></div><!--左箭头。如果放置在swiper外面，需要自定义样式。-->
      <div class="swiper-button swiper-button-next"></div><!--右箭头。如果放置在swiper外面，需要自定义样式。-->
    </div>
    <div>
      <a target="_blank" href="https://www.swiper.com.cn/api/index.html">swiper中文网</a>
    </div>

  </div>
</template>

import 'swiper/css/swiper.min.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: "carouselChart",
  components: {
    Swiper,
    SwiperSlide
  },
  data(){
    return {
      swiperOptions: {
        initialSlide: 1,   //初始索引
        direction: "horizontal",  //切换方向  vertical
        speed: 400,  // 每屏滑动时间，即切换速度
        grabCursor:true,   //鼠标悬浮后变为小手
        loop: true,   //开启无限循环模式， 首尾相接
        //自动切换 组件
          autoplay: {
            delay: 2000,   //2秒切换一次
            disableOnInteraction:false,  //用户操作完继续轮播
          },

        /* 分页器组件 */
        pagination: {
          el: '.swiper-pagination',
          type: "bullets"
        },
        /* 自由滑动 不吸附两侧*/
        freeMode: true,

        /* 前进后退按钮 */
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        slidesPerView: 'auto',


      },
      arr:[
        {src:require("../../assets/images/1.jpg")},
        {src:require("../../assets/images/2.jpg")},
        {src:require("../../assets/images/3.jpg")},
        {src:require("../../assets/images/4.jpg")},
        {src:require("../../assets/images/5.jpg")},

      ]
    }
  }
}

.container {
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.swiper {
  width: 100%;
}

.swiper-pagination {
  position: absolute;
  bottom: 20px;
  left:50%;
  transform: translateX(-50%);
}
>>>.swiper-pagination-bullet {
  margin-right:10px;
}
>>>.swiper-pagination-bullet-active {   /* 分页器圆点颜色*/
  background: #D354D7;
}
.swiper-button {
  width: 30px;
  height: 100px;
  border-radius: 5px;
  background: rgba(0,0,0,0.5);

}
.swiper-button-next:after,.swiper-button-prev:after {
  color: rgba(125,125,125,0.6);
  font-size: 30px;
}

swiper中文网：https://www.swiper.com.cn/api/index.html