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

Question

[EvolveSunVolt]

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

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

Comments

[Вадим]

Ну вопрос достаточно странный.
Вы знаете что это слайдер.
Вы знаете что должно происходит.

Соответственно, у Вас уже есть вся необходимая информация чтобы знать куда копать.

Не понятно чего Вы ожидаете в ответе?
Копать в сторону слайдеров, смотреть какие у них есть методы\события, чтобы реализовать подобное.

Например, если мы говорим про swiper slider, то может пригодится beforeSlideChangeStart и slideChangeTransitionEnd.

Либо писать свой слайдер.

Ну и так же по теме:
Поиск элементов в dom
css анимации

[Михаил Р.]

Внимание вопрос, найдутся ли в нашем милом и добром сообществе люди, которые подскажут мне "куда копать" и "какой лопатой" )

Надуться экстрасенсы, если ссылкой на сайт со слайдером не поделитесь.

[EvolveSunVolt]

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

Нет, вам же лучше написать про то, какой вопрос "странный", вам надо спросить, зачем я пришел сюда с таким вопросом, чего я ожидаю тут, вы еще всерьез объясняете, почему этот вопрос "странный".

Вы пытаетесь научить новичков, чтобы они сами всё делали, искали инфу в сети, смотрели видео индусов и становились супер прогами, которым потом будет впадлу подсказать новичку дорогу? Я не пойму, тогда зачем нужен такой вот форум?

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

[EvolveSunVolt]

Михаил Р., а ссылки то нет, как я могу предоставить нужную для вас инфу? я использую slick slider или swiper js. Кстати, могу фигмой поделиться, если это решит вашу потребность в ссылке на сайт

[Вадим]

EvolveSunVolt,

Вот почему вы не можете просто написать, я бы вот так сделал, я бы это использовал, посмотри-ка вот это и всё

Потому что всё что Вы даёте - не самое полное описание желаемого результата и картинку. Опыт не опыт - а экстрасенсов тут нет.

Вы пытаетесь научить новичков, чтобы они сами всё делали, искали инфу в сети, смотрели видео индусов и становились супер прогами

Да. Потому что если человек не может этого - либо нанимать ментора, либо обречён быть лоу левел кодером не способным к самообучению.

[Вадим]

EvolveSunVolt, а, ну и потому что

великодушное сообщество программистов

может и великодушное, но так же душное и токсичное. Так что сразу долой розовых пони с ваших зелёных лугов.

[Михаил Р.]

EvolveSunVolt, мне ссылка нужна была для исследования данного слайдера.

как я могу предоставить нужную для вас инфу?

У Вас тоже скриншот? Вы же вроде пишите, что там есть определенные эффекты, откуда Вы о них узнали?

Кстати, могу фигмой поделиться, если это решит вашу потребность в ссылке на сайт

Спасибо, не нужно.

[EvolveSunVolt]

Вадим, Да при чем тут неспособность к самообучению?
Неужели, я не могу прийти сюда и спросить, а какие технологии лучше использовать для этого, а "какой рецепт посоветуете для приготовления такого-то торта"? Я же не прошу вас приготовить мне торт, и то что у меня даже будет рецепт торта - это ни капли не значит, что он будет вкусным.
Если думать по вашей логике, то какие вопросы нужно задавать на этом форуме?
Вы мне сейчас прямым текстом говорите, "сюда не пиши" иди в сети решай свои проблемы или ментора найми.
Зачем нужен эта ветка хабра тогда?

Выше вы писали, мол всё предельно понятно же, в чем проблема? А тут вы говорите, что я не дал полное описание картинки? Ок, какая информация еще нужна(я рил не знаю)? Научите меня задавать правильно вопросы на этом форуме.

[EvolveSunVolt]

Михаил Р., ну в фигме указаны эффекты

[iljaGolubev]

копайте в сторону параллакса

[Вадим]

EvolveSunVolt,
Давайте подытожим.
- Неспособность самообучения при том, что Вы знаете ответ на свой вопрос. И вместо того, чтобы действительно пойти копать - пришли спросить а куда копать.
- "Неужели, я не могу прийти сюда и спросить" - можете конечно. Приходите. Но и ответы будут соответствующие вашему вопросу.
- Я написал Вам что может помочь в решении вопроса.
- "Если думать по вашей логике" - не нужно мне навязывать якобы мою логику. Какой вопрос - такой ответ. Вот и вся логика. и далее по тексту я Вам ни прямым ни косвенным текстом ничего такого не говорил. Вы задали вопрос почему мой первый комментарий именно такой и я ответил.
- Вы спросили куда копать, хотя все темы Вам известны куда копать. Копать = искать в гугле (если что). И вот там то как раз всё предельно понятно.
- Что Вы хотите в итоге получить - да, не до конца понятно. Вы же понимаете разницу между этим пунктом и предыдущим?
- "Научите меня задавать правильно вопросы". Хороший вопрос, как известно, содержит в себе половину ответа. В идеале вопрос должен выглядеть примерно так:
-- Ожидаемый результат с демонстрацией по необходимости (картинка и\или видео).
-- Фактический результат проделанной работы для достижения ожидаемого результата с примерами кода, в идеале выложенный на codepen или другой подобный ресурс чтобы можно было оперативно зайти, посмотреть, продебажить, поправить.
--- Ну и соответственно, формулировка вопроса должна быть достаточно точной, а не абстрактной типа "куда идти, как лучше и тд". С описанием стэка проекта . Потому что нет золотого стандарта. Нет единственно верного решения. Одно и то же на разных проектах может потребоваться делать по разному в зависимости от требований, архитектуры, стэка и тд.

[EvolveSunVolt]

Вадим, это было круто, спасибо)

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента. Также обратите внимание на п.3.4

Answer 1

[Сергей delphinpro]

Пишем кастомный слайдер. Нафиг не нужен здесь готовый.

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

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

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

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

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

А дальше самое простое – по кликам на кнопки управления нужно просто менять состояния слайдов с помощью навешивания и убирания у них css классов.

Answer 2

[ThunderCat]

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

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

Скорее всего просто 2 связанных слайдера, но в одном прописана видимость текста, а в другом - картинки...
Слайды могут быть любым хтмл элементом со сложной структурой. Ну или писать самому, если охота...