Слайдер на чистом CSS 3, без JS и JQuery.

Сегодня мы рассмотри ещё один слайдер на чистом CSS3, но на этот раз мы готовы сломать все стереотипы о том, что каждый раз когда мы попадаем на страницу со слайдером, мы видим один и тот же путь смены слайдов. Хотелось отметить, что данный слайдер не имеет JS и из него можно сделать, как галерею, так и простой привлекательный слайдер для сайта на чистом CSS. В итоге мы получим слайдер который вы видели на фото выше.

Рассмотрим HTML слайдера

Данный код необходимо разместить в блоке, где необходимо вывести слайдер.
				
					<section class='galeria'>
 <input type="radio" id="uno" value="1" name="tractor" checked='checked' />
 <input type="radio" id="dole" value="2" name="tractor" />
 <input type="radio" id="tele" value="3" name="tractor" />

 <article class='card una'>
 <!-- здесь должен быть ваш контент, который отображается на слайде-->
 <label for='dole' class='entypo-left-bold otra'></label>
 <label for='tele' class='entypo-right-bold otra'></label>
 <label for='uno' class='entypo-arrows-ccw afin'></label>
 </article>
<!-- другие артикулы -->
</section> 
				
			

Теперь рассмотрим сам CSS код для слайдера.

Для правильной работы нашего слайдера нам необходимо добавить следующие CSS стили.

Первым делом мы должны будем сделать общий вид нашего слайдера и оформить его как полагается.

Все это в CSS:

				
					input {visibility: hidden;}
/* estilos generales de los labels */
label {
 background: #15BFCC;
 position: absolute;
 top: 0; bottom: 0;
 margin: auto 0;
 color: #fff;
 font-size: 4vw;
 line-height: 15vh;
 text-align: right;
 height: 15vh;
 width: 4vw;
 padding: 0 .5vw;
 cursor: pointer;
 opacity: .2;
 box-shadow: 0 0 1px 1px rgba(255,255,255,.5) inset;
 transition: .5s;
}
/* los labels colocados a la derecha */
.otra + .otra,
#uno:checked ~ .tres .afin,
#dole:checked ~ .una .afin,
#tele:checked ~ .dos .afin {
 right: 0;
 text-align: left;
}
/* los labels prev y next del cuadro activo */
#uno:checked ~ .una .otra,
#dole:checked ~ .dos .otra,
#tele:checked ~ .tres .otra {
 background: #0D757D;
 display: block;
}
/* escondo las next y prev en los cuadros inactivos
 y la label para activar el propio article cuando ya lo está */
#uno:checked ~ .una .afin,
#dole:checked ~ .dos .afin,
#tele:checked ~ .tres .afin,
:not(:checked) ~ .otra
 {display: none;}
/* resalta los label al hacer :hover sobre el article que las contien */
.card:hover label {
 animation: pulso 1s infinite alternate;
}
/* resalta el label al hacer :hover sobre él */
.card:hover label:hover {
 animation: none;
 opacity: .8;
 width: 10vw;
}
				
			
Настроив внешний вид нашей галереи, приступим к оформлению кнопок и других мелких элементов. Вот второй кусок CSS.
				
					/* El input marcado y el article asociado a él */
#uno:checked ~ .una,
#dole:checked ~ .dos,
#tele:checked ~ .tres {
 animation: 2s central;
 animation-fill-mode: forwards;
 transform-origin: center center;
 z-index:3;
}
/* El input marcado y un de los articles no asociado a él */
#uno:checked ~ .dos,
#dole:checked ~ .tres,
#tele:checked ~ .una {
 animation: 1s fuera-izq;
 animation-fill-mode: forwards;
 transform-origin: center left;
 z-index: 2;
}
/* El input marcado y el otro de los articles no asociado a él */
#uno:checked ~ .tres,
#dole:checked ~ .una,
#tele:checked ~ .dos {
 animation: 1.5s fuera-dch;
 animation-fill-mode: forwards;
 transform-origin: center right;
 z-index: 2;
}
				
			
Далее настроим анимацию для нашего слайдера, красивый и плавный переход объектов. Так же в данном CSS коде можно вносить правки по временным задержкам. Собственно судите сами.
				
					/* el article seleccionado */
@keyframes central {
0% {transform: scale(.8);z-index: 1;}
80% {transform: scale(.5);z-index: 3;}
100% {transform: scale(1);z-index: 3;}
}
/* el article no seleccionado a la izquierda */
@keyframes fuera-izq {
0% {transform: scale(1) translatex(0%);}
70% {transform: scale(.9) translatex(-100%);}
100% {transform: scale(.9) translatex(-7%);}
}
/* el article no seleccionado a la derecha */
@keyframes fuera-dch {
0% {transform: scale(1) translatex(0%);}
70% {transform: scale(.9) translatex(100%);}
100% {transform: scale(.9) translatex(7%);}
}
/* los pulsos de los labels al :hover de su article */
@keyframes pulso {
50% {opacity: .7;}
} 
				
			
Надеемся, что данный слайдер вам понравился. Так же можно вставлять в текст ссылки, которые будут вести на определённую страницу вашего веб-ресурса. Если у кого-то возникнут вопросы. Буду рад ответить. Задавайте их в комментариях. Если статья оказалось полезной добавьте на неё ссылку в соц. сетях.
Свежие записи
Команда RD

Команда RD и RMDIR позволяют удалять как каталоги, так и

Оборудование
help2site
Если компьютер не видит внешний жесткий диск

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

Программы
help2site
Руководство к дескрипторам

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

Web-Дизайн
help2site
Плагин my category order и бизнес сайт на wordpress

Плагин wordpress my category order упорядочит рубрики. Плагин wordpress my category order не является обязательным для сайта/блога, но он позволит выглядеть вашему вэб-ресурсу более привлекательно