웹을 위한 확장 가능한 베어 본 캐러셀. CSS와 JavaScript로 확장하여 멋진 슬라이드 쇼를 만드세요. 

Embla Carousel은 종속성이 없으며 100 % 오픈 소스입니다.

https://github.com/davidcetinkaya/embla-carousel 

Demo

HTML:

<div class="embla">
  <div class="embla__container">
    <div class="embla__slide">
      Slide 1
    </div>
    <div class="embla__slide">
      Slide 2
    </div>
    <div class="embla__slide">
      Slide 3
    </div>
    <div class="embla__slide">
      Slide 4
    </div>
  </div>
</div>

CSS:

.embla {
  overflow: hidden;
}

.embla__container {
  display: flex;
}

.embla__slide {
  position: relative; /* Needed if loop: true */
  flex: 0 0 100%; /* Choose any slide width */
}

Javascript:

import EmblaCarousel from 'embla-carousel'

const emblaNode = document.querySelector('.embla')
const options = { loop: true }
const embla = EmblaCarousel(emblaNode, options)

Options:

const embla = EmblaCarousel(emblaNode, {
  align: 'center',
  containerSelector: '*',
  slidesToScroll: 1,
  containScroll: false,
  draggable: true,
  dragFree: false,
  loop: false,
  speed: 10,
  startIndex: 0,
  selectedClass: 'is-selected',
  draggableClass: 'is-draggable',
  draggingClass: 'is-dragging',
})