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

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

Счетчик символов в текстовом поле на jQuery

11 августа 2014 Антон Кулешов

Посещая различные интернет ресурсы, вы могли заметить на некоторых из них форму с ограниченной областью ввода и подсчетом введенных символов. Подобное решение применяют, зачастую, на тех ресурсах, где при большой посещаемости необходимо экономить место на хостинге, и чересчур длинные комментарии нежелательны. Реализуется подобный функционал относительно просто, а выглядит интересно. Счетчик символом - это одно из средств, которое помогает пользователю сориентироваться, сколько слов можно ввести в текстовое поле. Самый яркий пример – это Твиттер, где подсчет символов и ограничение длины фразы, скорее, фишка проекта.

Прогон по каталогам – мифы и реальность

12 июня 2015 ti1schweiger

Добавить сайт в Яндекс Каталог – цель любого веб-мастера. Для молодого начинающего блогера – это признание его заслуг, для матерого продвиженца – рутинная часть работы, потому как, серьёзно продвигаемый проект просто обязан попасть в Яндекс Каталог, если вы вбухали солидную сумму в SEO, то подобную опцию можно потребовать как подтверждение проделанной работы. Что же нам дает попадание нашего сайта в Яндекс Каталог и стоит ли игра свеч? Давайте разберемся.

Всплывающие подсказки на CSS

28 декабря 2015 Антон Кулешов

После вынужденного отсутствия я вернулся к привычному распорядку дня и сегодня продолжу пополнять коллекцию falbar новыми решениями. Тема статьи не раз уже рассматривалась на сайте – всплывающие подсказки, но библиотека, о которой пойдет речь, возможно, наилучшим образом подойдет для вашего проекта, так как не использует сторонних скриптов, написанных на JavaScipt или jQuery, а только HTML и CSS.