<body>
    <div class="wrapper">
      <button class="prev" type="button" onclick="prevSlide(this)">➤</button>
      <div class="slider">
        <div class="item">
          <img src="https://picsum.photos/301" />
          <div class="title">Lorem</div>
        </div>

        <div class="item">
          <img src="https://picsum.photos/302" />
          <div class="info">
            <div class="title">Ipsum</div>
          </div>
        </div>

        <div class="item">
          <img src="https://picsum.photos/355" />
          <div class="title">Dolor sit amet</div>
        </div>

        <div class="item">
          <img  src="https://picsum.photos/303" />
          <div class="title">Consectetur</div>
        </div>

        <div class="item">
          <img src="https://picsum.photos/399" />
          <div class="title">Adipiscing</div>
        </div>
      </div>
      <button class="next" type="button" onclick="nextSlide(this)">➤</button>
    </div>
  </body>

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: auto;
  max-width: 1280px;
  height: 100vh;
  display: flex;
}
.wrapper {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  margin: auto;
  align-items: center;
}
.slider {
  height: 17rem;
  position: relative;
  display: flex;
  overflow: hidden;
}

.item .title {
  font-weight: bold;
  margin: 1rem;
}

.item img {
  height: 14rem;
}

.next,
.prev {
  font-family: monospace;
  font-size: 5rem;
  background: none;
  border: 0px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: rgb(100,100,100, 0.5);
}
.prev{
  transform: rotate(-180deg);
}
.next:hover{
  text-shadow: 2px 2px 2px rgb(200,200,200);
}
.prev:hover{
  text-shadow: 2px -2px 2px rgb(200,200,200);
}

.item {
  flex: 1 0 25%;
  min-height: 200px;
  text-align: center;
  height: auto;
}

@media (max-width: 1024px) {
  .item {
    flex: 1 0 33%;
  }
}
@media (max-width: 768px) {
  .item {
    flex: 1 0 50%;
  }
}
@media (max-width: 576px) {
  .item {
    flex: 1 0 100%;
  }
}

const nextSlide = (event) => {
      const slider = event.parentNode.children[1]
      slider.append(slider.children[0])
    }
    const prevSlide = (event) => {
      const slider = event.parentNode.children[1]
      slider.prepend(slider.children[slider.children.length - 1])
    }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.