Показать Меню
falbar Смена изображений CSS3 слайдер

Смена изображений CSS3 слайдер

Смена изображений CSS3 слайдер

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

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

Не вижу смысла пилить весь HTML в статью, поэтому добавлю код только для одного слайда:

<section class="cr-container">
	<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked />
	<label for="select-img-1" class="cr-label-img-1">1</label>

	<!-- Кнопки слайдера -->

	<div class="clr"></div>
	<div class="cr-bgimg">
		<div>
			<span>Slice 1 - Image 1</span>
			<span>Slice 1 - Image 2</span>
			<span>Slice 1 - Image 3</span>
			<span>Slice 1 - Image 4</span>
		</div>

		<!--
			HTML в который будет выводиться картинка
			и биться на несколько частей
		-->
	</div>
	<div class="cr-titles">
		<h3><span>Заголовок 1</span><span>Подробное описание 1</span></h3>

		<!-- Заголовки и описания слайдов -->
	</div>
</section>

Само изображение указывается в заднем фоне дива лежащего в блоке с классом cr-bgimg в стилях:

.cr-container input.cr-selector-img-1:checked ~ .cr-bgimg,
.cr-bgimg div span:nth-child(1){
	background-image: url(../img/slide1.jpg);
}

Изначально слайдер рассчитан на 4 изображения, но, я думаю, моему читателю не составит труда его расширить при необходимости. Главный плюс этого слайдера – отсутствие сторонних библиотек. Смена изображений производится только средствами CSS. Так что, если Вы не ориентируетесь на пользователей, которые не обновляют свой браузер, то это решение будет хорошим способом разукрасить страницу и сделать её более живой.

Источник
tympanus.net

Подписаться на обновления

Комментариев еще не оставлено