/* CSS Document */

.carousel {
	/*
    width: 500px; /* 根据需要调整 
    height: 500px; /* 根据需要调整 
    overflow: hidden;
    position: relative;
	*/
	
	/*	设置图片的宽度*/
	width: 1000px;
	/*max-width: 375px;*/
	
	/*	设置图片的高度	*/
	height: 317px;
	
	/*	设置图片边框距离	*/
	margin: 0 auto;
	
	overflow: hidden;
	position: relative;
}
 .slides {
  	display: flex;
  
  	/*	设置总图片的宽度,有多少张图片就设置为百分之多少百	*/
  	width: 400%;
  
  	/*	设置图片总显示时间	*/
  	animation: slide 20s infinite;
}
.slides:hover {
	/*	设置鼠标放图片上暂停	*/
  	animation-play-state: paused;
}
.slide {
  	flex: 1;
	
	/*	设置图片占用总长的比例	*/
  	min-width: 25%;
  	position: relative;
}
.slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
 
@keyframes slide{
	/*
    0% { transform: translateX(0); }
    30% { transform: translateX(0); }
    33% { transform: translateX(-100%); }
    63% { transform: translateX(-100%); }
    66% { transform: translateX(-200%); }
    96% { transform: translateX(-200%); }
    100% { transform: translateX(0); }
	*/
	/*	设置图片显示的方式, 有多少张图片就设置多少	*/
	0% { transform: translateX(0); }
  	25% { transform: translateX(-25%); }
  	50% { transform: translateX(-50%); }
	75% { transform: translateX(-75%); }
  	100% { transform: translateX(0); }
}