Для этого урока я сделал две разные версии карусели, первая версия — это та, которую мы создаем в этом посте, с базовой функциональностью, которую легче понять и которая удобна для начинающих.
Вторая версия выполнена в виде пакета npm, который представляет собой улучшенную версию первой версии, которую можно использовать повторно и которая позволяет настраивать дополнительные функциональные возможности. Вы можете найти здесь и здесь.
Резюме
В первой части статьи мы решили, что будем использовать flex-basis для рендеринга наших компонентов на стороне сервера и заменим flex-basis на width, как только мы войдем в среду браузера. и наш JavaScript был загружен.
Выполнение
Для простоты я буду создавать компонент, используя Nextjs, который представляет собой фреймворк React, который на стороне сервера автоматически отображает ваше приложение. Если вы знаете React, вы сможете следовать за нами, так как мы будем использовать чистый React почти на 100%. (Вы также можете использовать приложение create-реагировать)
Поскольку эта статья будет посвящена созданию карусели, поэтому я пока пропущу шаблон, вы можете найти его на github.com/yizhuang, чтобы вы могли начать работу. Или вы можете просто создать компонент под названием Carousel.js в своем приложении create-react-app.
В Карусель.js:
