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

Question

[Extra0]

Привет всем.
Ребят столкнулся с проблемой реализации слайдера.
Нужно получить следующий эффект - c2n.me/jay3NG
как сделать так, чтобы у центрального блока картинка была больше и был виден текст, а у 1 и 3 текста соответсвенно не было и сами картинки меньше?

Answer 1

[Cyapa]

Я так понимаю, слайдер вы хотите на CSS, иначе вопроса о реализации не было, так как на JS это делается просто.

CSS реализация отталкивается от радио инпутов - на каждый слайд свой инпут. Под каждым слайдом уже есть текст, только он скрыт по умолчанию. При выборе радио инпута к слайду, связанному с ним, применяются определенные стили (показывается текст, увеличивается картинка).

<input type="radio" id="slide_1" />
<img src="slide_1.png" />
<p>Description 1</p>

p
{
    display: none;
}

#slide_1:checked ~ img
{
    width: 120%;
    height: 120%;
}

#slide_1:checked ~ p
{
    display: block;
}

Comments

[Extra0]

мне нужно на jquery это сделать! не смог найти примеры... поделитесь информацией пожалуйста

Answer 2

[Сергей]

Вам надо учить jquery

Comments

[Константин Довнар]

Где-же кнопочка "не нравится"? :(

Answer 3

[Евгений Попов]

Можно и на чистом css реализовать без проблем, пример
Суть, если кратко в том чтобы текст и картика были в каждом из блоков но по умолчанию картика была маленькая текст скрыт, но при этом указать что второй блок в списке(:nth-child(2)) в не зависимости что там за блок наоборот картинка имела большие размеры + текст там виден.

Comments

[Extra0]

такой вариант не пройдет!! так как это слайдер

[Евгений Попов]

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