Слайдер на чистом 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 позволяют удалять как каталоги, так и

Web-Дизайн
help2site
Добавить нового клиента в Bill manager

Входим в Bill manager, переходим в пункт меню Клиент—> Клиенты —> иконка Создать Откроется форма Регистрации клиента, вносим данные Клиента Добавим нового клиента в соответствующую

Оборудование
help2site
Как выбрать мощность блока питания для ПК

Пошаговая инструкция как выбрать мощность блока питания под определённый компьютер. Поможет сэкономить деньги и нервы. Мощность блока питания компьютера — основа выдержки производительности Подавляющее большинство

Web-Дизайн
help2site
Как пишутся скрипты на PHP

Для написания кода на PHP подходит любой текстовый редактор (например Notepad++). Оглавление Размещение PHP на HTML-странице Код скрипта PHP может размещаться непосредственно на HTML-странице. Чтобы

Web-Дизайн
help2site
Настройка виртуальных хостов

В этой заметке речь пойдет о настройке виртуальных хостов Apache под Windows. Я расскажу, что такое виртуальные хосты и для чего они используются. Подробные иллюстрации

Настройка
help2site
Установить Telegram на компьютер

Несмотря на то, что на территории Российской Федерации популярный мессенджер Telegram был запрещён Роскомнадзором, это не останавливает пользователей, продолжать с ним работать. Ведь у него

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

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