Сегодня мы рассмотри ещё один слайдер на чистом 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;}
}
Надеемся, что данный слайдер вам понравился. Так же можно вставлять в текст ссылки, которые будут вести на определённую страницу вашего веб-ресурса. Если у кого-то возникнут вопросы. Буду рад ответить. Задавайте их в комментариях. Если статья оказалось полезной добавьте на неё ссылку в соц. сетях.
