Adaptive carousel slider

Lately I needed to implement a carousel slider for website, none of the sliders that I've founded suited design that I needed so I've created another one.

Key idea of this slider that it has very little JS and work independently from other slider on the page

All JS is basically two functions for Next and Previous buttons:

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])
}

As you might see from code it depends on layout and moves slides right in DOM Node.
Pretty simple, don't you think?

Also it uses media-query in order to react to screen width:

.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%;
  }
}

Example you might find in following codepen: