<template>
	<div class="swiper-container" ref="floor1Swiper">
		<div class="swiper-wrapper">
			<div class="swiper-slide" v-for="(c, cc) in list" :key="cc">
				<img :src="c.imgUrl" />
			</div>
		</div>
		<!-- 如果需要分页器 -->
		<div class="swiper-pagination"></div>

		<!-- 如果需要导航按钮 -->
		<div class="swiper-button-prev"></div>
		<div class="swiper-button-next"></div>
	</div>
</template>

<script>
// 引入swiper轮播图插件
import Swiper from "swiper";
export default {
	name: "Carousel",
	props: ["list"],
	watch: {
		list: {
			// 监听是保证数据已经获取到,但是不保证v-for已经执行结束
			handler(oldValue, newValue) {
				this.$nextTick(() => {
					var mySwiper = new Swiper(this.$refs.floor1Swiper, {
						loop: true, // 循环模式选项
						// 如果需要分页器
						pagination: {
							el: ".swiper-pagination",
							// 点击小球切换图片
							clickable: true,
						},
						// 如果需要前进后退按钮
						navigation: {
							nextEl: ".swiper-button-next",
							prevEl: ".swiper-button-prev",
						},
					});
				});
			},
			// 进入页面就立即监听
			// 因为数据是父组件传递过来的，数据早就有了，通过这个来触发
			immediate: true,
		},
	},
};
</script>

<style>
</style>