@Extra0

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

Привет всем.
Ребят столкнулся с проблемой реализации слайдера.
Нужно получить следующий эффект - c2n.me/jay3NG
как сделать так, чтобы у центрального блока картинка была больше и был виден текст, а у 1 и 3 текста соответсвенно не было и сами картинки меньше?
  • Вопрос задан
  • 2550 просмотров
Пригласить эксперта
Ответы на вопрос 3
Cyapa
@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;
}
Ответ написан
butteff
@butteff
Раз в тысячу лет заправляю свитер в носки
Вам надо учить jquery
Ответ написан
Kaaboeld
@Kaaboeld
Web-разработчик
Можно и на чистом css реализовать без проблем, пример
Суть, если кратко в том чтобы текст и картика были в каждом из блоков но по умолчанию картика была маленькая текст скрыт, но при этом указать что второй блок в списке(:nth-child(2)) в не зависимости что там за блок наоборот картинка имела большие размеры + текст там виден.
Ответ написан
Ваш ответ на вопрос

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

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