vue页面中el-carousel轮播页面或图片

轮播页面

<template>
	<!--  @change="handChange" -->
	<el-carousel trigger="click" :autoplay="false" height="1530px" ref="carousel">
		<el-carousel-item v-for="(item,index) in swiperList" :key="index" :name="item.id">
			<div v-show="item.id=='1'">
				<oneSwiper></oneSwiper>
			</div>
			<div v-show="item.id=='2'">
				<twoSwiper></twoSwiper>
			</div>
			<div v-show="item.id=='3'">
				<threeSwiper></threeSwiper>
			</div>
			<div v-show="item.id=='4'">
				<fourSwiper></fourSwiper>
			</div>
		</el-carousel-item>
	</el-carousel>
</template>

<script>
	import oneSwiper from './utils/oneSwiper.vue'
	import twoSwiper from './utils/twoSwiper.vue'
	import threeSwiper from './utils/threeSwiper.vue'
	import fourSwiper from './utils/fourSwiper.vue'
	export default {
		components: {
			oneSwiper,
			twoSwiper,
			threeSwiper,
			fourSwiper
		},
		data() {
			return {
				swiperList: [{
						id: '1'
					},
					{
						id: '2'
					},
					{
						id: '3'
					},
					{
						id: '4'
					},
				]

			}
		},
	}
</script>

轮播图片

<template>
  <el-carousel :interval="5000" arrow="always" trigger="click" :autoplay="false">
    <el-carousel-item v-for="item in carouselList" :key="item">
	  <el-image
	        :src="item"
	        fit="fill"></el-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
 data () {
  return {
	 carouselList:[require("../jszs/utils/3.png"),require("../jszs/utils/4.jpg"),
	 require("../jszs/utils/5.jpg"),require("../jszs/utils/6.jpg"),
	 require("../jszs/utils/7.jpg")] 

  }
 }
}

</script>

<!--这里的样式可以根据自己的页面自己修改-->
<style scoped lang="scss">
  /deep/.el-carousel__item img{
     height: 1070px;
	 max-width: 1268px;
  }
  /deep/.el-carousel__item{
	  text-align: center;
  }
  /deep/.el-carousel__container {
      height: 1070px;
  }
</style>