Живая демонстрация 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
Авторы приветствуются
Если вы хотите присоединиться ко мне и добавить функции или исправления от себя — не стесняйтесь обращаться ко мне или создать запрос на включение.