Задать вопрос
@EvolveSunVolt

Как сделать вот такой slider?

В общем, снизу изображение.
Весь текст и изображения являются элементами одного слайдера.

Нажал на кнопку next, текст "улетает" вверх с эффектом исчезновения, а активная картинка "убегает" влево с постепенным эффектом исчезновения, картинка становится НЕ видна, когда ее расположение доходит до уровня, где обитает текст.

6478480f48c3e394679132.png
  • Вопрос задан
  • 195 просмотров
Подписаться 1 Средний 13 комментариев
Пригласить эксперта
Ответы на вопрос 2
delphinpro
@delphinpro
frontend developer
Пишем кастомный слайдер. Нафиг не нужен здесь готовый.

Все слайды размещаем "стопкой" с помощью грид-раскладки (можно абсолютом, но это хуже)
Внутри слайда располагаемдва блока - текст и картинка. Текст невидимый, картинка за пределами слайда, в том сотоянии, из которого она будет выходит в состояние маленького размера справа. Блокам с текстом и картинкой задаем свойства плавного перехода (transition).
Наверху "бутерброда" слой с кнопками управления.

Дальше определяем три состояния картинки.

Первое уже определено - это невидимый слайд, текст скрыт (opacity:0), картинка за пределами не видна.

Второе состояние - "следующий слайд". Здесь текст все еще не виден, а картинка маленькая.

Третье состояние - "активный слайд". Здесь текст виден и и картинка большая в центре.

А дальше самое простое – по кликам на кнопки управления нужно просто менять состояния слайдов с помощью навешивания и убирания у них css классов.
Ответ написан
Комментировать
ThunderCat
@ThunderCat
{PHP, MySql, HTML, JS, CSS} developer
Больше всего похоже на слегка настроенный сликслайдер, активный имеет чуть больший размер, что задается цссом.
Весь текст и изображения являются элементами одного слайдера.
Скорее всего просто 2 связанных слайдера, но в одном прописана видимость текста, а в другом - картинки...
Слайды могут быть любым хтмл элементом со сложной структурой. Ну или писать самому, если охота...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы