* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}
body {
 font-family: tahoma, arial;
}


.slider-container {
 margin: 10px auto;
 width: 800px;
 height: 250px;
 position: relative;
}


.slider-container img {
  position: absolute;
  opacity: 0;
  transition: opacity 1s;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.slider-container img.active {
 opacity: 1;
}


.slider-container .slider-number {
 position: absolute;
 top: 10px;
 left: 10px;
 background-color: rgba(0,0,0, .6);
 color: #FFF;
 padding: 5px 10px;
 font-size: 20px;
 z-index: 2;
 border-radius: 6px;
}


.slider-controls {
  max-width: 800px;   
  margin: 10px auto 0; 
  display: flex;       
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}




.slider-controls .prev, 
.slider-controls .next {
 background-color: #009688;
 color: #FFF;
 font-size: 16px;
 text-align: center;
 cursor: pointer;
 border-radius: 4px;
 padding: 5px;
 user-select: none;
 width: 20%;
}


.slider-controls .prev {
 float: left;
}


.slider-controls .next {
 float: right;
}


.slider-controls .prev.disabled, 
.slider-controls .next.disabled {
 cursor: no-drop;
 background-color: #00968840;
}


.slider-controls .indicators {
 width: 60%;
 float: left;
}


.slider-controls .indicators ul {
 list-style: none;
 margin: 0;
 text-align: center;
}


.slider-controls .indicators ul li {
 display: inline-block;
 background-color: F6F6F6;
 color: #333;
 font-weight: bold;
 height: 28px;
 width: 28px;
 border-radius: 4px;
 margin: 0 2px;
 line-height: 28px;
 cursor: pointer;
}


.slider-controls .indicators ul li.active {
 background-color: #009688;
 color: #FFF;
}