|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
25.07.2021, 08:04 | #1 |
Пользователь
Регистрация: 03.01.2021
Сообщений: 11
|
Как сделать анимацию переключения картинки
Доброго времени суток!
Я только учусь и поэтому прошу сильно не ругать за возможные глупости! Делаю учебный проект интернет магазина на React.js + Redux, так вот сделал я компонент по типу слайдера и выглядит он примерно вот так: работает он следующим образом - при нажати на круглую кнопку меняется картинка. Реализовал я это так - круглые кнопки рендерятся автоматически и их количество зависит от количества картинок, а картинки в свою очередь загружаются с json-server(a) в виде ссылок на wampi и сохраняются в Redux, так же в Redax хранится активный индекс картинки которая должна быть показана, а этот индекс меняется при нажатии на одну из круглых кнопок из-за чего в свою очередь меняется картинка. А моя проблема заключается в том, что я хочу, чтобы при переключении изображения она анимировалась. Прошу помочь с данной проблемой, дать направления для поиска решения или похожие готовые решения. Готовые библиотеки желательно не предлагать (но можно), хочу решить проблему именно в таком виде как сейчас. Пытался по разному анимировать, но максимум, что у меня получалось - это анимация первого изображения при обновлении страницы. ниже приведу код компонента: в пропсах компонента приходят следующие данные:
Код:
|
07.08.2021, 18:30 | #2 |
Пользователь
Регистрация: 03.01.2021
Сообщений: 11
|
На данный момент данную проблему я решил все-таки с помощью библиотеки, хоть и не хотел таким образом ее решать, но результат меня в принципе удовлетворил полностью, так как работает слайдер именно так как я планировал.
Применил я библиотеку "Swiper", единственное пришлось вручную менять стили переключателей и анимаций под свой проект, путем подключения к библиотеке своих кастомных файлов стилей, что кстати сделать довольно легко, работа с библиотекой довольно простая, относительно хорошая документация и понятные Демо-примеры готовых слайдеров с кодом для различных фреймворков, мне понравилась. Пытался еще одну библиотеку применить, правда забыл название, даже пример в документации полностью соответствовал моим потребностям, но почему то он у меня не работал, даже дефолтный пример из документации никак не хотел работать, хотя вроде делал все согласно инструкций из этой документации. P.S. Без применения библиотек, как я и хотел, я подумаю сделать, ради собственного интереса и нестандартной на данный момент для меня задачи, но скорее всего не в ближайшее время, так как в данный момент у меня другие цели и их достижение занимает все мое доступное время и силы. Всем спасибо! |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как после работы текстовом режиме и переключения в графический, сделать считывание клавиш(Readkey)для графического? | Vladosikman | Помощь студентам | 1 | 07.12.2018 21:49 |
Как сделать анимацию в PHP | Vlad123DD | HTML и CSS | 1 | 11.11.2016 21:22 |
Как сделать gif анимацию | sanek_da | HTML и CSS | 3 | 24.04.2013 14:23 |
объясните как сделать анимацию | povsklada | HTML и CSS | 4 | 01.03.2012 13:08 |
Как сделать анимацию картинки | 2210 | Мультимедиа в Delphi | 4 | 01.04.2009 02:23 |