В предыдущей части вы создали бесконечную карусель, но она не была анимирована. Так что ты сделаешь это прямо сейчас. Первую часть этой статьи вы найдете по адресу https://medium.com/@fredimanuelb/how-to-make-an-animated-infinite-carousel-with-react-from-scratch-part-1-770420f5f4ce. .
Анимация карусели
Позиции изображений будут меняться в зависимости от текущего изображения. Текущее изображение будет в центре, следующее изображение справа, а предыдущее изображение слева.
Код может быть таким:
И стили:
При этом у вас есть анимация, подобная следующей:
Как видите, у анимации есть проблема — пробелы. Это пустое пространство потому, что раньше мы хотели отображать только одно изображение. Теперь мы хотим отобразить два изображения.
Создайте новое состояние для управления отображаемыми изображениями.
Код будет:
Теперь ваша анимация должна выглядеть так:
У вас есть функциональная и анимированная бесконечная карусель!! 🥳🥳. Теперь вы можете использовать его для своих проектов и сделать свой сайт более интерактивным.
Вы можете увидеть код на https://github.com/Vanaldito/inifinite-carousel/tree/second_part.
Это все для этой статьи, до встречи.
