Как сделать анимацию переключения картинки

[vv_tomilin]

Доброго времени суток!

Я только учусь и поэтому прошу сильно не ругать за возможные глупости!

Делаю учебный проект интернет магазина на React.js + Redux, так вот сделал я компонент по типу слайдера и выглядит он примерно вот так:


работает он следующим образом - при нажати на круглую кнопку меняется картинка.

Реализовал я это так - круглые кнопки рендерятся автоматически и их количество зависит от количества картинок, а картинки в свою очередь загружаются с json-server(a) в виде ссылок на wampi и сохраняются в Redux, так же в Redax хранится активный индекс картинки которая должна быть показана, а этот индекс меняется при нажатии на одну из круглых кнопок из-за чего в свою очередь меняется картинка.

А моя проблема заключается в том, что я хочу, чтобы при переключении изображения она анимировалась.

Прошу помочь с данной проблемой, дать направления для поиска решения или похожие готовые решения.

Готовые библиотеки желательно не предлагать (но можно), хочу решить проблему именно в таком виде как сейчас.

Пытался по разному анимировать, но максимум, что у меня получалось - это анимация первого изображения при обновлении страницы.

ниже приведу код компонента:

в пропсах компонента приходят следующие данные:

• promoItems - приходит массив с объектами такого типа
  

  [      
         {
              "id": 0,
              "promoURL": "https://ic.wampi.ru/2021/07/24/promo_1.png"
          },
          {
              "id": 1,
              "promoURL": "https://ic.wampi.ru/2021/07/24/promo_2.jpg"
          },
          {
              "id": 2,
              "promoURL": "https://ic.wampi.ru/2021/07/24/promo_3.jpg"
          }
  ]

• onClickActivePromo - приходит функция меняющая активный индекс картинки
  
• activeIndex - активный индекс который хранится в Redux и меняется после нажатия круглой кнопки и вызова функции выше

import React from 'react';
import PropTypes from 'prop-types';

function DiscountsBanners({promoItems, onClickActivePromo, activeIndex}) {
  const promoImgArr = promoItems.map((obj) => obj.promoURL);
  const promoImg = promoImgArr[activeIndex];

  const onSelectActivePromo = (index) => {
    onClickActivePromo(index);
  };
  return (
    <section className='discounts-bunners'>
      <h2 className='visually-hidden'>Баннеры проходящих акций и скидок</h2>

      <ul>
        <li className='discounts-bunners__bunner-item'>
          <img
            className='discounts-bunners__bunner-mob'
            src={promoImg} alt=''/>
        </li>
        <li className='discounts-bunners__bunner-item'>
          <img
            className='discounts-bunners__bunner-desktop'
            src={promoImg} alt=''/>
        </li>
      </ul>

      <div className='discounts-bunners__toggles-wrapper'>
        <ul className='discounts-bunners__toggles'>
          {
            Array(promoItems.length)
                .fill(0)
                .map((_, index) =>
                  <li
                    key={index}
                    className={
                      activeIndex === index ?
                      `discounts-bunners__toggle 
                      discounts-bunners__toggle_current` :
                      'discounts-bunners__toggle'
                    }
                    onClick={() => onSelectActivePromo(index)} >
                  </li>,
                )
          }
        </ul>
      </div>
    </section>
  );
}

export default DiscountsBanners;

DiscountsBanners.propTypes = {
  promoItems: PropTypes.array.isRequired,
  onClickActivePromo: PropTypes.func.isRequired,
  activeIndex: PropTypes.number.isRequired,
};

[vv_tomilin]

На данный момент данную проблему я решил все-таки с помощью библиотеки, хоть и не хотел таким образом ее решать, но результат меня в принципе удовлетворил полностью, так как работает слайдер именно так как я планировал.

Применил я библиотеку "Swiper", единственное пришлось вручную менять стили переключателей и анимаций под свой проект, путем подключения к библиотеке своих кастомных файлов стилей, что кстати сделать довольно легко, работа с библиотекой довольно простая, относительно хорошая документация и понятные Демо-примеры готовых слайдеров с кодом для различных фреймворков, мне понравилась. Пытался еще одну библиотеку применить, правда забыл название, даже пример в документации полностью соответствовал моим потребностям, но почему то он у меня не работал, даже дефолтный пример из документации никак не хотел работать, хотя вроде делал все согласно инструкций из этой документации.

P.S. Без применения библиотек, как я и хотел, я подумаю сделать, ради собственного интереса и нестандартной на данный момент для меня задачи, но скорее всего не в ближайшее время, так как в данный момент у меня другие цели и их достижение занимает все мое доступное время и силы.

Всем спасибо!