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

mult-lab4

Доброго времени суток дорогие друзья!

Сегодня мы рассмотри ещё один слайдер на чистом 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;}
}&nbsp;
Смотреть Демо Скачать Исходники






Надеемся, что данный слайдер вам понравился. Так же можно вставлять в текст ссылки, которые будут вести на определённую страницу вашего веб-ресурса. Если у кого-то возникнут вопросы. Буду рад ответить. Задавайте их в комментариях. Если статья оказалось полезной добавьте на неё ссылку в соц. сетях.

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

  1. О, я как раз искал такой что бы без JS и JQuery, предпочитаю их не использовать без необходимости

    • Спасибо вам TimPlay за теплый отзыв. Будем стараться, добавлять новые интересные слайдеры без JS и JQuery. Если у вас возникнут вопросы по данному слайдеру, обращайтесь.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *