DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Gleb Svechnikov
Gleb Svechnikov

Posted on

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])
}
Enter fullscreen mode Exit fullscreen mode

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%;
  }
}
Enter fullscreen mode Exit fullscreen mode

Example you might find in following codepen:

Top comments (0)

12 APIs That You Will Love

Free and easy to use APIs for your next project, learning a new technology, or building a new feature.