.slider {
  position: relative;
  overflow: hidden;
}

.slides {
  display: block;
  transition: transform 0.3s ease-in-out;
}

.slide {
  flex: 1;
  height: 100%;
  display: block;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.slide1 {
  background-color: #FFF;
}

.slide2 {
  background-color: #FFF;
}

.slide3 {
  background-color: #FFF;
}

.slider-controls {
  display: block;
  justify-content: space-between;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
}

.prev-slide,
.next-slide {
  background-color: #333;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 10px;
  outline: none;
}

.prev-slide:hover,
.next-slide:hover {
  background-color: #555;
}