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

3 июня 2016 Антон Кулешов 1860 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
Читайте далее

Умная кнопка прокрутки «Наверх и обратно»

22 ноября 2014 Антон Кулешов

Сегодня в статье я расскажу про плагин, который позволяет сделать кнопку прокрутки «Наверх» как Вконтакте. Это означает, что после прокрутки страницы в верхнее положение, пользователь может вернуться обратно туда, где он и находился.

Гистограммы и не только

8 сентября 2015 Антон Кулешов

Порой на ресурсе приходится отобразить какие-либо статистические данные: будь то сводная диаграмма из нескольких метрик, статистика для геймеров, биржевая сводка и многое другое. Ранее все решалось до боли просто: мы строили нужный график в таблицах excel, а затем, в виде картинки, помещали его у себя на сайте, но что делать, если необходимо подкорректировать данные или они обновляются, скажем, каждые 10 минут? Искать раба? Ну, уж нет, для построения графиков прямо на сайте есть более эффективные методы, и сегодня мы рассмотрим библиотеку morris.

Как сделать всплывающие подсказки, разбираемся с WebUI Popover

14 января 2015 Антон Кулешов

В сегодняшней статье я хочу рассмотреть тему, которая появилась еще во время зарождения первых пользовательских интерфейсов, в частности Windows 3.11 (если кто помнит), и прочно закрепилась во всех приложениях, нацеленных на работу с пользователем – всплывающие подсказки.