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

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

3 июня 2016 3905 0

Уже давненько я нечего не добавлял по теме слайдеров и вот, как раз недавно, наткнулся на очень интересное решение с красивыми переходами при смене картинок. Сегодняшний слайдер не будет использовать никаких библиотек, а только возможности смены изображений в 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. Так что, если вы не ориентируетесь на пользователей, которые не обновляют свой браузер, то это решение будет хорошим способом разукрасить страницу и сделать её более живой.

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