Карусель Simple React
Сегодня мы собираемся создать простую карусель с помощью react.
Перво-наперво вам нужно создать новый проект реакции, а затем запустить nem start, чтобы убедиться, что все работает нормально:
run npx create-react-app react-carousel code react-carouse // to open the project inside the visual studio code OR cd react-carousel // to enter in the project npm start
После этого мы собираемся открыть App.css, стереть все содержимое и вставить следующие стили:
В App.js создайте новое состояние с именем activeImageIndex и вставьте этот массив фиктивных изображений:
Теперь удалите весь код внутри div с помощью класса App, создайте div с классом carousel-details с основным тегом изображения:
Этот код показывает изображение с индексом, который мы собираемся выбрать позже, щелкнув изображение. Для этого нам нужно создать структуру с большими пальцами изображения под основным изображением:
Теперь нам нужно установить activeImageIndex с индексом изображения, которое мы щелкнули:
Теперь, чтобы закончить с классом (ha), мы собираемся добавить класс затухания ко всем НЕ выбранным изображениям:
Вот и все! если есть сомнения, загляните в репозиторий github:
