Живая демонстрация https://agitated-banach-4668c2.netlify.com/

Пакет NPM https://www.npmjs.com/package/react-sliding-container

Источник GitHub https://github.com/vygandas/react-sliding-container

Ветка для других пакетов с настроенным всем необходимым https://github.com/vygandas/react-sliding-container/tree/npm-package-component-skeleton-boilerplate

Что это

Это компонент слайдера. Это позволяет вам добавлять свои собственные компоненты React внутрь и отображать их, когда пользователь перемещается влево или вправо. На данный момент загружено 3 контейнера слайдов, а другие контейнеры вообще не отображаются. Они визуализируются, когда их положение — основной слайд или один слева или справа.

Эти компоненты также позволяют добавлять все, что вы хотите, например. карта, видео youtube, столбцы, другие компоненты.

Он имеет функцию касания / пролистывания на мобильных устройствах.

Почему я сделал это

Я хотел иметь компонент, который мог бы обрабатывать любой контент, который я ему передаю. Его можно использовать для демонстрации различных элементов. Например, если у вас есть список продуктов на настольном устройстве, вы можете сделать горизонтальный список с этими продуктами, отображать, скажем, только 3 за раз в столбцах и позволять пользователю проводить пальцем влево и вправо, чтобы увидеть их все. Это позволит сэкономить место на мобильном телефоне. Другая причина в том, что я хотел сделать отличный шаблонный скелетный проект для компонентов на основе React/TypeScript.

Возможности в шаблоне:

  • Запустите lint fix, тесты и сборку перед git commit, push и npm publish.
  • Машинопись, Реагировать, SCSS
  • TS, SASS Линтинг
  • Тесты, Шутка, Мокко, Фермент
  • Конфигурации для систем:
  • Трэвис
  • Appveyor
  • CircleCI
  • Интеграция с комбинезонами для отображения количества протестированного кода (вы должны добавить свой собственный токен в .coveralls.yml или, если используете CI, добавить переменную среды COVERALLS_REPO_TOKEN для отправки результатов)

Как пользоваться

Вот пример простой интеграции этого компонента.

Как видите, он использует Slide, SlidingContainer и main.css.

Список задач

  • Улучшение пролистывания на мобильных устройствах (особенно при встроенном Youtube)
  • Добавить различные обратные вызовы
  • Добавить функцию автоматической анимации
  • Добавить навигацию по клавиатуре влево/вправо
  • Добавить обратный вызов onSlideLoaded

Авторы приветствуются

Если вы хотите присоединиться ко мне и добавить функции или исправления от себя — не стесняйтесь обращаться ко мне или создать запрос на включение.