Как сделать scroll-snap для автоматической прокрутки на горизонтальном контейнере в CSS? - PullRequest
Новая
       59

Как сделать scroll-snap для автоматической прокрутки на горизонтальном контейнере в CSS?

0 голосов
/ 23 октября 2019

Я сделал слайдер с CSS, используя свойство scroll-snap. Однако я бы хотел, чтобы мой слайдер автоматически прокручивался каждые пару секунд, но пользователь также должен иметь возможность скользить вперед и назад. Пока что пользователь может прокручивать назад и вперед, но когда я добавляю анимацию с помощью @keyframes, пользователь не может вернуться в слайдер, когда @keyframes автоматически выполняет прокрутку вперед.

У меня есть живая демонстрация проекта. Я удалил автоматическую прокрутку анимации @keyframes. Прямо сейчас, это только прокручивается на ощупь в мобильных устройствах. Или вы можете прокрутить с сенсорной панели вашего ноутбука.

Что я пытаюсь сделать, так это то, что мне нужно дать моему слайдеру функцию автопрокрутки, но я хочу, чтобы мои пользователи тоже могли перемещаться вперед и назад по слайдеру. Любая помощь в Javascript приветствуется. (Вероятно, это будет единственный JS, который я буду использовать в своем проекте.)

Вот живой проект: https://sametweb.github.io/daimahaberv3/ Мой основной слайдер - это тот, у которого самые большие изображения, вторая строка изображений настраницы.

Я использовал эту анимацию @keyframes, но пользователь не может прокрутить предыдущие элементы в слайдере. 

  0%,
  100% {
    transform: translateX(0);
  }
  9% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-100%);
  }
  19% {
    transform: translateX(-100%);
  }
  20% {
    transform: translateX(-200%);
  }
  29% {
    transform: translateX(-200%);
  }
  30% {
    transform: translateX(-300%);
  }
  39% {
    transform: translateX(-300%);
  }
  40% {
    transform: translateX(-400%);
  }
  49% {
    transform: translateX(-400%);
  }
  50% {
    transform: translateX(-500%);
  }
  59% {
    transform: translateX(-500%);
  }
  60% {
    transform: translateX(-600%);
  }
  69% {
    transform: translateX(-600%);
  }
  70% {
    transform: translateX(-700%);
  }
  79% {
    transform: translateX(-700%);
  }
  80% {
    transform: translateX(-800%);
  }
  89% {
    transform: translateX(-800%);
  }
  90% {
    transform: translateX(-900%);
  }
  99% {
    transform: translateX(-900%);
  }
}

Мой контейнер слайдера и элемент слайдера CSS: 

.main-slider {
    .flex();
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    height: 100%;
    padding: 0 0 3rem 0;
    &::-webkit-scrollbar {
      width: 0 !important;
    }
    .item {
      position: relative;
      display: inline-block;
      flex: 0 0 85%;
      margin: 0 2rem 0 0;
      scroll-snap-align: center;
      scroll-behavior: smooth;
    }
  }

Мне нужно решение, решающее проблему с @keyframes, смахивающим предыдущие элементы, или добавлением режима автопрокрутки с помощью Javascript.

...