Slider de contenido CSS puro con navegación por teclado

Vista prévia

Descripción

Un Slider de contenido simple y totalmente receptivo con transiciones CSS3 y teclado & flechas de navegación, construido con HTML simple y CSS/CSS3 puro. Creado por < a href = "https://codepen.io/dp_lewis/" target = "_ blank" rel = "noopener" > dp_lewis .

Funcionamiento

Compile la estructura HTML para un control deslizante de contenido de la siguiente manera.

<form>

<input type="radio" name="fancy"
value="slide1" id="slide1" />

<input type="radio" name="fancy" value="slide2" id="slide2" />

<input type="radio" name="fancy" value="slide3" id="slide3" />

<input type="radio" name="fancy" value="slide4" id="slide4" />

<label for="slide1">Slide 1</label>

<label for="slide2">Slide 2</label>

<label for="slide3">Slide 3</label>

<label for="slide4">Slide 4</label>
</form>

El CSS requerido para estilo y animar el deslizador de contenido.

label {

background: #444;

color: #fff;

-webkit-transition: -webkit-transform 400ms ease-out;

transition: transform 400ms ease-out;

display: inline-block;

min-height: 100%;

width: 100vw;

height: 100vh;

position: relative;

z-index: 1;

text-align: center;

line-height: 100vh;
}

form {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

white-space: nowrap;
}

input { position: absolute; }

input:focus ~ .keys { opacity: 0.8; }

input:nth-of-type(1):checked ~ label:nth-of-type(1),
input:nth-of-type(2):checked ~ label:nth-of-type(2),
input:nth-of-type(3):checked ~ label:nth-of-type(3),
input:nth-of-type(4):checked ~ label:nth-of-type(4) { z-index: 0; }

input:nth-of-type(1):checked ~ label {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

input:nth-of-type(2):checked ~ label {

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);
}

input:nth-of-type(3):checked ~ label {

-webkit-transform: translate3d(-200%, 0, 0);

transform: translate3d(-200%, 0, 0);
}

input:nth-of-type(4):checked ~ label {

-webkit-transform: translate3d(-300%, 0, 0);

transform: translate3d(-300%, 0, 0);
}

label {

background: #444;

-webkit-background-size: cover;

background-size: cover;

font-size: 3rem;
}

label:before,
label:after {

color: white;

display: block;

background: rgba(255,255,255,0.2);

position: absolute;

padding: 1rem;

font-size: 3rem;

height: 10rem;

vertical-align: middle;

line-height: 10rem;

top: 50%;

-webkit-transform: translate3d(0, -50%, 0);

transform: translate3d(0, -50%, 0);

cursor: pointer;
}

label:before {

content: "\3e";

right: 100%;

border-top-left-radius: 50%;

border-bottom-left-radius: 50%;
}

label:after {

content: "\3c";

left: 100%;

border-top-right-radius: 50%;

border-bottom-right-radius: 50%;
}