CSS sólo sensible deslizador horizontal

Vista prévia

Descripción

Un control deslizante horizontal, de pantalla completa y adaptable que permite al usuario alternar entre diapositivas de página mediante transiciones y transformaciones CSS3.

Funcionamiento

Cree el encabezado del deslizador que contiene nuestros elementos de navegación:

<header>

 <!-- slide-1-trigger -is the id name of our first radio button-->

<label for="slide-1-trigger">Slide One</label>


 <label for="slide-2-trigger">Slide Two</label>

<label for="slide-3-trigger">Slide Three</label>

<label for="slide-4-trigger">Slide Four</label>
</header>

Cree las secciones de la página como sigue:

<input id="slide-1-trigger" type="radio" name="slides" checked>
<!-- this is our radio slider section combinations here -->
<section class="slide slide-one">

<h1>Headline One</h1>
</section>

<input id="slide-2-trigger" type="radio" name="slides">
 <section class="slide slide-two">

<h1>Headline Two</h1>
</section>

<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">

<h1>Headline Three</h1>
</section>

<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">

<h1>Headline Four</h1>
</section>

Envuélvalo en un contenedor DIV:

<div class="wrap">

<header>
 <!-- header contains our navigation elements -->


<label for="slide-1-trigger">Slide One</label>
 <!-- slide-1-trigger -is the id name of our first radio button-->


<label for="slide-2-trigger">Slide Two</label>


<label for="slide-3-trigger">Slide Three</label>


<label for="slide-4-trigger">Slide Four</label>

</header>



<input id="slide-1-trigger" type="radio" name="slides" checked>
<!-- this is our radio slider section combinations here -->

<section class="slide slide-one">


<h1>Headline One</h1>

</section>


<input id="slide-2-trigger" type="radio" name="slides">

 <section class="slide slide-two">


<h1>Headline Two</h1>

</section>


<input id="slide-3-trigger" type="radio" name="slides">

<section class="slide slide-three">


<h1>Headline Three</h1>

</section>


<input id="slide-4-trigger" type="radio" name="slides">

<section class="slide slide-four">


<h1>Headline Four</h1>

</section>


</div>

El CSS principal para el estilo del deslizador.

.wrap {

width: 100%;

height: 100%;

position: relative;

overflow: hidden;


 /* This is so we can position our slides absolutely off screen and we won't get any horizontal scroll bars */

background: #120103;

color: #fff;

text-align: center;
}

header {

background: #3E474F;

box-shadow: 0 .5em 1em #111;

position: absolute;

/* We position it absolutely to the top-left corner */

top: 0;

left: 0;

z-index: 900;
 /*And give it a z-index of 900 so that we are sure that's on top of the rest of the content.*/

width: 100%;
}

header label {

color: #788188;

cursor: pointer;

display: inline-block;
 /* This way our labels will be side-by-side and centered in the middle of our header. Inline-block also allows for our line-height to be respected */

line-height: 4.25em;

/* This gives us a larger clickable area*/

font-size: .667em;

font-weight: bold;

padding: 0 1em;
}

header label:hover {

background: #2e353b;
}

.slide {

width: 100%;

height: 100%;

position:absolute;

top: 0;

left: 100%;

 /* With these styles, we are pushing all of our slides off to the side of the window. */

z-index: 10;

padding: 8em 1em 0;

background-color: #120103;

background-position: 50% 50%;

background-size:cover;

 /* now our images fill up the entire slide */

transition: left 0s .75s;
 /* duration to 0.
delay it by 0.75 seconds. So these transition styles have the new slide coming in and afterwards our old slides, slides back out.*/
}

Vamos a usar un selector de atributos para seleccionar cualquier entrada que tenga un ID que empiece por Slide. A continuación, vamos a calificar el selector añadiendo la pseudo-clase de "Checked". Esto apuntará a cualquiera de nuestras entradas de radio, ya que todos comienzan con "Slide" entonces mediante el uso del combinador hermano adyacente que es el signo "+", finalmente podemos apuntar a nuestra diapositiva.

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

left: 0;


 /* When our radio element is checked, we want to position our slide back on the left corner of our wrapper, so we will set left to zero */

z-index: 100;
 /* we wanna raise the z-index to 100, to be sure our slide is on top of the previous one. */

transition: left .65s ease-out;
}

.slide h1 {

opacity: 0;

transform: translateY(100%);

transition: transform .5s .5s, opacity .5s;

/* This transition will allow us to see the opacity go down to zero, but it will delay the transform until the next slide is already covering it.*/
}

[id^="slide"]:checked + .slide h1 {
/* Now we target our headline when our input is in its checked state */

opacity: 1;

transform: translateY(0);

transition: all .5s .5s;
 /* This will have our headline appearing and rising as the slide is coming onto the screen. */
}

Añada imágenes de fondo a las diapositivas.

.slide-one {

background-image: url('1.jpg');
}

.slide-two {

background-image: url('2.jpg');
}

.slide-three {

background-image: url('3.jpg');
}

.slide-four {

background-image: url('4.jpg');
}