style.css

.carousel{
	position: relative;
	height: 600px;
	width: 80%;
	margin: 0 auto;
}
.carousel_image{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.carousel_track-container{
	background: lightblue;
	height: 100%;
	position: relative;
	overflow: hidden;
}
.carousel_track{
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	height: 100%;
	transition: transform 250ms ease-in;
}
.carousel_slide{
	position: absolute;
	top: 0;
	left:0;
	bottom: 0;
	width: 100%;
}
.carousel_button{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	cursor: pointer;
}
.carousel_button--left{
	left: -40px;
}
.carousel_button--right{
	right: -40px;
}
.carousel_button img{
	width: 18px;
}
.carousel_nav{
	display: flex;
	justify-content: center;
	padding: 10px 0;
}
.carousel_indicator{
	border:0;
	border-radius: 50%;
	width: 15px;
	height: 15px;
	background: rgba(0,0,0,0.3);
	margin: 0 10px;
	cursor: pointer;
}
.carousel_indicator.current-slide{
	background: rgba(0,0,0,0.75);
}
.is-hidden{
	display: none;
}