Секция-слайдер с четырьмя фотографиями

Кроме 4-х фотографий каждый слайд имеет фоновое изображение, заголовок и описание. И все это анимируется движком anime.js

Пример:

Байкал
Озеро тектонического происхождения в южной части Восточной Сибири, самое глубокое озеро на планете, крупнейший природный резервуар пресной воды и самое большое по площади пресноводное озеро на континенте.
Камчатка
Полуостров в северо-восточной части Евразии на территории России. Омывается с запада Охотским морем, с востока - Беринговым морем и Тихим океаном.
Карелия
Субъект Российской Федерации, республика в её составе. Входит в состав Северо-Западного федерального округа, является частью Северного экономического района.
Алтай
Субъект Российской Федерации, республика в её составе. Входит в Сибирский федеральный округ, является частью Западно-Сибирского экономического района.

HTML:

Обратите внимание, первый слайд имеет класс is-active

CSS:

JS:

Подключаем anime.min.js и скрипт ниже.

За основу взято решение, найденное на codepen.io у пользователя Haja Randriakoto
Библиотека anime.js
Фотографии pixabay.com

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Алексей:

    А как сделать чтобы автоматически перелистывалось через 5 секунд? Спасибо

    Ответить
    • Alexander:

      Можно ниже

      nextBtn.onclick = next;

      Добавить:

      window.setInterval(next, 5000);
      Ответить