* {
	box-sizing:border-box;
}
.carousel {
	position:relative;
	height:300px;
	width:500px;
	overflow:hidden;
}
.carousel-inner {
	position:relative;
}
.carousel-inner .item {
	opacity:0;
	z-index:1;
	position:absolute;
	top:0;
	left:0;
}
.carousel-inner .item.active {
	opacity:1;
	transition:opacity .5s;
	z-index:5;
}
.carousel-inner .item > img {
	max-width:100%;
	height:auto;
}
.carousel-sort {
	list-style:none;
	padding:0;
	position:absolute;
	bottom:10px;
	z-index:10;
	left:50%;
	transform:translateX(-50%);
}
.carousel-sort .item {
	cursor:pointer;
	padding:4px 20px;
	margin-right:5px;
	float:left;
	border:1px solid black;
	background-color:#b0b0b0;
}
.carousel-sort .item.active {
	background-color:#f5f5f5;
}
.carousel-left,.carousel-right {
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:70px;
	z-index:15;
	text-align:center;
	cursor:pointer;
	background:url("https://images.cnblogs.com/cnblogs_com/py-peng/1647393/o_200322083251direction.png") no-repeat -84px;
}
.carousel-left:hover {
	background-position:0;
}
.carousel-right {
	left:auto;
	right:0;
	background-position:-124px;
}
.carousel-right:hover {
	background-position:-42px;
}