По умолчаниюСветлая версия
↑ перейти к списку статей

Слайдер изображений и контента на CSS3

Как-то, работая над одним проектом, меня попросили подумать, как реализовать слайдер картинок, но без помощи javascript. Да сделать так, чтобы это все смотрелось более-менее эстетично и красиво.  И вновь на помощь пришел CSS3.

Я опишу два вида реализации слайдера: по наведению и по клику.

Для обоих вариантов понадобится одна и та же разметка html. Да и стили особо отличаться не будут.

Вот как это все выглядит:

<div class="slider">
	<div class="parents one">первый пункт</div>
		<div class="parent-hidden">
			<div class="parents two">второй пункт
				<div class="child two-slide">
					<img src="images/2.jpg" alt="">
					<div class="child-content">наш текст</div>
				</div>
			</div>
			<div class="parents three">третий пункт
				<div class="child three-slide">
					<img src="images/3.jpg" alt="">
					<div class="child-content">наш текст</div>
				</div>
			</div>	
		</div>
		<div class="child one-slide">
			<img src="images/1.jpg" alt="">
			<div class="child-content">наш текст</div>
		</div>
</div>

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

Обертка parent-hidden нужна для того, чтобы при смене слайдов начиная со второго и далее вниз не проявлялось изображение первого слайда, у которого по умолчанию отключена прозрачность. Ниже будет описано, как это делается в CSS.

Все фокусы у нас спрятались в CSS. Скажу сразу, что описывать красивости вроде теней и градиентов я не буду, т.к. не это является предметом статьи. Затронем лишь функциональные элементы.

Контролы у нас идут обычными блоками, имеющими свою ширину и высоту:
.parents{
position:relative;
height:100px;
width:190px;
}

А вот блоки с контейнерами мы позиционируем уже абсолютно и задаем им размеры:
.child{
position:absolute;
left:190px;
top:0px;
width:480px;
height:300px;
background:#777;
text-shadow:none;
z-index:1;
}

Теперь нам надо для второго и третьего слайда прописать одну из самых главных плюшек — opacity:
.two-slide{
opacity:0;
}
.three-slide{
opacity:0;
}
Таким образом мы эти слайды делаем невидимыми.

Дальше мы обозначаем как должны появляться наши слайды. Для этого используем transition. При этом мы изменяем у слайдов сразу два свойства: opacity и z-index со «скоростью» в одну секунду:
.one-slide, .two-slide, .three-slide{
-webkit-transition-property:opacity, z-index;
-webkit-transition-duration:1s;
-moz-transition-property:opacity, z-index;
-moz-transition-duration:1s;
-o-transition-property:opacity, z-index;
-o-transition-duration:1s;
transition-property:opacity, z-index;
transition-duration:1s;

И теперь задаем «появляющимся» слайдам новые параметры, используя селектор обобщенных родственных элементов «~» для первого слайда и селектор потомков для второго и третьего слайдов.
.one:hover~.one-slide{
opacity:1;
z-index:4;
}
.two:hover .two-slide{
opacity:1;
z-index:99;
}
.three:hover .three-slide{
opacity:1;
z-index:50;
}
Прозрачность убрана совсем, и слайд становится видимым. А вот z-index’ы взяты не с потолка. Ими регулируется «резкость» проявления картинки. Т.е. чем больше конечный z-index, и разница между соседними индексами, тем плавнее происходит смена. У меня сейчас получилось что-то среднее. Но можно ими поиграться и полностью осмыслить как это работает.
Теперь скрываем первый слайд, чтобы он не проскакивал между сменами последующих слайдов:
.parent-hidden:hover~.one-slide{
opacity:0;
}
.parent-hidden:focus~.one-slide{
opacity:0;
}

Ну и для контента добавляем отдельный, абсолютно позиционированный блок, который вложен в слайд:
.child-content{
position:absolute;
bottom:0px;
left:0px;
padding:5px;
width:470px;
min-height:50px;
background:rgba(0,0,0,0.5);
color:#fff;
font-size:12px;
text-align:left;
line-height:normal;
}
Задание цвета фона через rgba позволяет нам сделать фон полупрозрачным. Высоту я не фиксировал и позволил блоку тянуться снизу вверх в зависимости от количества текста в нем.

На этом, собственно, и заканчивается все описание функционала работы.

Для варианта работы по клику нам необходимо лишь поменять псевдокласс :hover на псевдокласс :focus, а в разметке дивы заменить на ссылки с tabindex.

Работающие примеры находятся здесь
Поковырять код можно здесь
p.s. кто придумает как избавиться от обертки parent-hidden, может взять с полки пирожок :) Или написать в комментарии решение, я обязательно опубликую с именем автора и ссылкой на сайт(если таковая имеется)

Кнопки для сайта

5 комментариев: Слайдер изображений и контента на CSS3

  1. All Blond говорит:

    Саша,повесь на страничке для лиц особо одаренных :-) что Микрософ не поддерживает стандарт CSS3 вплоть до брозера интернет ехплорер 9. Если кому лень читать WS документацию то по краеней мере перестанут тебя доставать с дурацкими вопросами.
    А вообще отлично работаешь парень, твои работы висят на английских и американских учебно-показательных сайтах, правда имя твое в связи с отсутстием такового на твоем сайте они не публикют..

  2. ziv говорит:

    А можете подсказать как поменять местами колонку с изображением и кнопками? просто у меня чтото непонятное получается после попыток их поменять

  3. Антон говорит:

    Подскажите пожалуйста в случае с Вордпрессом в какой файл вставлять код?