Как создать полнофункциональный слайдер содержимого только на CSS3

Слайдеры контента — отличный способ сделать сайт более динамичным. Они добавляют изюминку, и при правильном использовании могут быть разницей между покупкой и кнопкой «Назад». Обычно они создаются с помощью jQuery или какой-либо другой библиотеки Javascript. Однако с появлением CSS3 я покажу вам, как создать его, используя только CSS.

В результате получится не самая семантическая вещь, которую когда-либо можно было сделать, но, тем не менее, она будет полностью функциональной.

Немного простого HTML для начала

		

			
			

			

			

			

			

			

			
			

				

					
					

						
Страница 1

						
Lorem ipsum dolor sit amet, consectur, что угодно.

					

				

				

					
					

						
Страница 2

						
Lorem ipsum dolor sit amet, consectur, что угодно.

					

				

				

					
					

						
Страница 3

						
Lorem ipsum dolor sit amet, consectur, что угодно.

					

				

				

					
					

						
Страница 4

						
Lorem ipsum dolor sit amet, consectur, что угодно.

					

				

				

					
					

						
Страница 5

						
Lorem ipsum dolor sit amet, consectur, что угодно.

					

				

				

					
					

						
Страница 6

						
Lorem ipsum dolor sit amet, consectur, что угодно.

					

				

			
		
		
		

		

		

		

		

		

		
		

		
		

			

			

			

			

			

			

		

	

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

У нас есть div « content-slider », который содержит весь контент. Мы просто установим « margin: 0 auto » и забудем об этом.

Затем у нас есть два раздела: div « content » и « nav » ul. Раздел content — это то, что содержит все наши страницы, а ul «nav» — это то, что позволяет нам получать доступ к разным страницам.

Теперь прямо внутри блока «content» вы заметите 6 вложенных блоков: от « content-inner-1 » до « content-inner-6 ». Эти 6 элементов заставят всю магию работать, и позже я объясню, как именно.

Волшебный CSS

 #контент-слайдер {
семейство шрифтов: arial;
ширина: 640 пикселей;
поле: 0 авто;
верхнее поле: 100 пикселей;
}

#содержание {
переполнение: скрыто;
ширина: 640 пикселей;
высота: 480 пикселей;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

# контент-внутренний {
ширина: 10000 пикселей;
высота: 480 пикселей;
}

.страница {
ширина: 640 пикселей;
высота: 480 пикселей;
плыть налево;
}

Как я уже сказал, все, что мы сделали с блоком « content-slider », это отцентрировали его и переместили на 100 пикселей от верхней части страницы.

Стиль div « content » очень важен. Мы устанавливаем его «переполнение» на «скрытый» — это гарантирует, что слайды будут невидимы, пока они не будут выбраны.

Теперь div « content-inner » — это то, что содержит все страницы. Вот почему он имеет ширину 10 000 пикселей. Обычно javascript дает ему нужную ширину, но в данном случае мы не используем javascript.

Страницы имеют ширину и высоту, и они перемещаются влево, чтобы быть рядом.

Теперь у нас есть общий стиль. Мы стилизуем « page-info » и « nav ».

 .страница-информация {
высота: 90 пикселей;
цвет фона: rgba (99, 99, 99, 0,6);
положение: родственник;
поле сверху: 0px;
внизу: 103px;
цвет: #дедеде;
отступ слева: 20px;
отступы сверху: 10px;
}

.страница-информация h2 {
размер шрифта: 21px;
нижняя граница: 10px;
поле сверху: 0px;
цвет: #фафафа;
}

.страница-текст {
размер шрифта: 15px;
}

Как видите, это всего лишь простой стиль, который делает информацию о странице полупрозрачной и делает текст разборчивым.

Далее мы добавим к кнопкам приятный стиль CSS3.

 .кнопка {
плыть налево;
фон: #бабаба;
ширина: 16 пикселей;
высота: 16 пикселей;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
радиус границы: 8px;
поле слева: 5 пикселей;
поле справа: 5px;
}

.кнопка:наведите {
-webkit-box-shadow: вставка 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: вставка 0px 0px 2px 2px #d4d4d4;
box-shadow: вставка 0px 0px 2px 2px #d4d4d4;
}

.кнопка: активный {
-webkit-box-shadow: вставка 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: вставка 0px 0px 2px 2px #7a7a7a;
box-shadow: вставка 0px 0px 2px 2px #7a7a7a;
}

.кнопка {
дисплей: блок;
ширина: 16 пикселей;
высота: 16 пикселей;
}

Мы сделали кнопки круглыми и добавили им тени, чтобы добавить глазу конфеты.

Наконец, мы добавим в смесь волшебный ингредиент. Однако перед этим я объясню, как все это будет работать.

Используя :target pseudo-selector , мы можем стилизовать элементы, которые находятся в URL-адресе. Например:

 #пример {
видимость: скрытая;
}

#пример:цель {
видимость: видимая;
}

Теперь, если бы мы находились на таком URL-адресе, как «http://www.example.com/index.html #example », применялись бы стили «:target», указанные выше. В этом случае div «пример» будет виден.

Используя эту концепцию, мы можем имитировать функцию щелчка javascript. Если пользователь щелкнет ссылку, указывающую на «http://www.example.com/index.html#example», стили будут применены к «примеру».

В этом случае мы будем использовать «:target», чтобы наш слайдер контента работал. Когда пользователь нажимает на любую из шести кнопок в навигации, «внутренний контент» перемещается в соответствующую позицию, как и в случае с версией javascript.

Вот код:

 #content-inner-1: цель #content-inner {
-webkit-transition: облегчение всех 400 мс;
-moz-transition: облегчение всех 400 мс;
-o-transition: все 400 мс облегчаются;
переход: все 400 мс облегчение;
поле слева: 0px;
}

#content-inner-2: цель #content-inner {
-webkit-transition: облегчение всех 400 мс;
-moz-transition: облегчение всех 400 мс;
-o-transition: все 400 мс облегчаются;
переход: все 400 мс облегчение;
поле слева: -640px;
}

#content-inner-3: цель #content-inner {
-webkit-transition: облегчение всех 400 мс;
-moz-transition: облегчение всех 400 мс;
-o-transition: все 400 мс облегчаются;
переход: все 400 мс облегчение;
поле слева: -1280px;
}

#content-inner-4: цель #content-inner {
-webkit-transition: облегчение всех 400 мс;
-moz-transition: облегчение всех 400 мс;
-o-transition: все 400 мс облегчаются;
переход: все 400 мс облегчение;
поле слева: -1920px;
}

#content-inner-5: цель #content-inner {
-webkit-transition: облегчение всех 400 мс;
-moz-transition: облегчение всех 400 мс;
-o-transition: все 400 мс облегчаются;
переход: все 400 мс облегчение;
поле слева: -2560px;
}

#content-inner-6: цель #content-inner {
-webkit-transition: облегчение всех 400 мс;
-moz-transition: облегчение всех 400 мс;
-o-transition: все 400 мс облегчаются;
переход: все 400 мс облегчение;
поле слева: -3200px;
}

Заключение

У нас есть 6 div « content-inner-[number] », и каждый div соответствует странице. 6 страниц это 6 div.

Div «content-inner» является дочерним элементом каждого div « content-inner-[number] », поэтому, когда любые 6 из этих div « content-inner-[number] » являются :targeted , мы можем стилизовать « content-inner » div соответственно.

Поскольку каждая страница имеет ширину 640 пикселей, мы просто устанавливаем значение margin-left элемента div « content-inner » кратным 640.

Чтобы эти стили « :target » работали, у нас должны быть ссылки, указывающие на них. Следовательно, « nav » ul под страницами.

Чтобы на самом деле анимировать « content-inner », мы даем ему обычные свойства анимации CSS3, конечно, с префиксами поставщиков.

Что ж, вот и все: полностью функциональный, хотя и несемантичный, слайдер контента.