Как сверстать такой слайдер-карусель?

Question

[Александр Осадчий]

Здравствуйте!

Помогите пожалуйста, все никак не могу справится с такой каруселью на сайт:


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

Пробовал собрать на slick - мало того, что толкком не вышло, так еще и переключение какое-то лаганное

Answer 1

[Kerm]

Сначала ищешь или сам делаешь обычный слайдер карусели, а после чисто css, с верху и снизу делаешь падинги чтобы увеличенный контейнер не уходил за overflow:hidden, после если у тебя контейнер каждой фотки такого вида: <div><div class="item-team">.......</div></div> то первому div делаешь position:relative, внутреннему position:absolute, центрируешь его, увеличиваешь вручную или скриптом размеры какие нужно, делаешь видимым блок с html описанием далее блок с фоткой 50%, блок с описанием 50%, float:left им ставишь и все. Ну и чтобы плавно все было тож в css transition delay блокам которые увеличиваются ставишь...

Comments

[Александр Осадчий]

Дак в slick примерно так все и организованно..только одновременное центрование слайда + разворачивание его описани - эффект передергивания вызывает

[Kerm]

Александр Осадчий, если слайдов не четное кол-во то один из слайдов как не крути будет всегда по середине, чего еще за центрирование? если родительский div не меняется в размерах, то все остальные блоки и сам скрипт не будут понимать что внутри этого блока сидит div с position:absolute большего размера чем родительский, чего там передергивается то?

[Kerm]

Я нашел работающий вариант, посмотрите:

jsfiddle.net/IgorRoschak/ratj76t9

Answer 2

[Lord_Dantes]

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