Infinte прокрутить слайдер, сделать DIV бесконечным - PullRequest
Новая
       46

Infinte прокрутить слайдер, сделать DIV бесконечным

0 голосов
/ 03 декабря 2018

Я хочу сделать мой слайдер с вертикальной прокруткой бесконечным;поэтому, когда вы прокрутите вниз до последнего элемента и прокрутите снова, первые элементы появятся снова.Div (id = "carousel") должен быть бесконечным.

Основы моего HTML: 

<div id="carousel">
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
</div>

CSS: 

    #carousel {
    overflow-y: auto;
    flex-direction: column;
    width: 100%;
}

#carousel img {
    width: 50%;
    height: 50%;
}

#carousel.snap {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
}

#carousel.snap > div {
    scroll-snap-align: center;
}

#carousel.snap {
    scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(50%);
    -ms-scroll-snap-points-x: repeat(50%);
}
...