swiper组件使用

 <div class="BroadcastWrap">
	        <swiper :options="swiperOption">
	        	    	   <swiper-slide class="swiper_class" v-for="(item,index) in idleList" :key="index">
	        	    	   	  <div class="swiper_imgCover">
	        	    	   	  	   <img :src="item.cover" class="swiper_class_img"/>
	        	    	   	  </div>
				         </swiper-slide>
              <!-- Add Pagination -->
              <div class="swiper-pagination change" slot="pagination"></div> <!--轮播小圆点样式更改可加入新的类进行操控-->
          </swiper>
	 </div>

<script>
export default {
  name: 'idle-index',

  components: {
  
  },
  data() {
    return {
      idleList: [],
      swiperOption: {
        direction: 'horizontal',
        loop: false, //让Swiper看起来是循环的
        autoplay: true, //是否自动播放
        speed: 500,
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true,
          dynamicMainBullets: 1,
        },
        paginationType: 'bullets', //圆点
        autoplayDisableOnInteraction: false,
        effect: 'slide',
        slidesPerView: 'auto',
        spaceBetween: 20,
        observer: true,
        centeredSlides: true,
        observeParents: true,
      },
   
     
    }
  },
 
  methods: {//调取接口获取轮播数据，在mounted周期中调用使得页面打开变进行数据展示}

  computed: {}
  mounted() {
   
  },
}
</script>

<!--轮播图样式,不加scoped-->
<style lang="less">
	 @m:750/375;
	 .BroadcastWrap{
	 	  height: 173px*@m;
	 }
	 .swiper-slide-active .swiper_imgCover{
	 	  width: 100%;height: 100%;
	 }
	.swiper-slide-active .swiper_imgCover:after{
	 	  position: absolute;
			top: 0;
			left: 0;
			height: 142px*@m;
			/*box-shadow: 0 14px 25px rgba(14, 21, 47, 0.15);*/
			-webkit-transition: all 0.3s ease 0s;
			-ms-transition: all 0.3s ease 0s;
			-o-transition: all 0.3s ease 0s;
			transition: all 0.3s ease 0s;
			width: 100%;
			display: block;
			content: '';
		
	 }
	 .BroadcastWrap .swiperSlide{
	 	  border-radius: 6px*@m;
	 	  width: 335px*@m!important;
			position: relative;
			background: #fff;
	 }
	 .BroadcastWrap .swiper-container{
	 	  height:173px*@m;
	 }
	 /*上一张和下一张的背景颜色*/
		.swiperSlide.swiper-slide-prev:after,
		.swiperSlide.swiper-slide-next:after {
			width: 100%;
			height: 100%;
			position: absolute;
			content: '';
			display: block;
			top: 0;
			left: 0;
			background: #000000;
			opacity: 0.3;
		}
		.swiperSlide img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius:3px*@m;
		}
		.swiperSlide.swiper-slide-prev {
			height:122px*@m;
			margin-top:20px*@m;
			overflow: hidden;
		}
		.swiperSlide.swiper-slide-next {
			height: 122px*@m;
			margin-top: 20px*@m;
			overflow: hidden;
		}
		.swiperSlide.swiper-slide-active {
			height: 142px*@m;
			/*width: 335px*@m;*/
			margin-top: 10px*@m;
			position: relative;
			overflow: hidden;
			box-shadow:0px 10px*@m 10px*@m #E3E3E3;
		}
		.swiperSlide.swiper-slide-active{
			border-radius:6px*@m;
		}
		.swiper-pagination-bullets {
			bottom: 0px*@m !important;
		}
		 .change /deep/ .swiper-pagination-bullet {
            width:6px*@m;
		    height: 6px*@m;
		    display: inline-block;
		    border-radius: 100%;
		    background:#515151!important;
    
    }
</style>