Control deslizante de imagen a pantalla completa con CSS puro

Vista prévia

Descripción

Un componente de Slider de pantalla completa HTML/CSS puro que utiliza entradas de radio para alternar entre imágenes. Fuertemente basado en transiciones y transformaciones CSS3.

Funcionamiento

Compile la estructura HTML para el control deslizante de pantalla completa.

<div class="container">

<input type="radio" id="s1" name="slides" checked="checked"/>

<section class="slide slide1">


<h2>Heading One</h2>

</section>

<input type="radio" id="s2" name="slides"/>

<section class="slide slide2">


<h2>Heading Twol</h2>

</section>

<input type="radio" id="s3" name="slides"/>

<section class="slide slide3">


<h2>Heading Three</h2>

</section>
</div>

El núcleo CSS/CSS3 estilos.

.container {

color: white;

position: relative;

overflow: hidden;

height: 100vh;

width: 100vw
}

.container h2 {

text-align: center;

font-size: 4.6em;

color: white;

font-family: 'Anton', sans-serif
}

.container input[type="radio"] {

position: absolute;

z-index: 10;

top: 90%
}

.container #s1 { left: 40% }

.container #s2 { left: 50% }

.container #s3 { left: 60% }

.container .slide {

position: absolute;

top: 0;

height: 100%;

width: 100%;

left: 100%;

transition: left 0s 1s
}

.container [id^="s"]:checked+.slide {

transition: all 0.65s ease-out;

left: 0;

z-index: 3
}

.container [id^="s"]:checked+.slide h2 {

transition: transform 0.82s 0.5s ease, opacity 0.8s 0.7s ease;

opacity: 1;

transform: translateY(0)
}

Añade imágenes de fondo personalizadas a las diapositivas.

.container .slide1 {

background-image: url("1.jpg");

background-size: cover
}

.container .slide1 h2 {

opacity: 0;

transform: translateY(-100%)
}

.container .slide2 {

background-image: url("2.jpg");

background-size: cover
}

.container .slide2 h2 {

opacity: 0;

transform: translateY(-100%)
}

.container .slide3 {

background-image: url("3.jpg");

background-size: cover
}

.container .slide3 h2 {

opacity: 0;

transform: translateY(-100%)
}