El deslizador de la tarjeta HTML/CSS puro

Vista prévia

Descripción

Un deslizamiento de la tarjeta HTML/CSS puro que le permite hacer clic a través de un grupo de secciones de contenido usando botones de radio y : checked pseudo-clase.

Funcionamiento

Incluye la Font awesome 4 para las flechas de navegación.

<link rel="stylesheet" href="font-awesome.min.css">

La estructura de marcado para el control deslizante de tarjeta.

<div class="container">

<input id="rad1" type="radio" name="rad" checked>

<section style="background: #449DF5">


<h1>Card 1</h1>


<p>Description 1</p>


<label for="rad3"><i class="fa fa-chevron-left"></i></label>


<label for="rad2"><i class="fa fa-chevron-right"></i></label>

</section>

<input id="rad2" type="radio" name="rad">

<section style="background: #40CCB5">


<h1>Card 2</h1>


<p>Description 2</p>


<label for="rad1"><i class="fa fa-chevron-left"></i></label>


<label for="rad3"><i class="fa fa-chevron-right"></i></label>

</section>

<input id="rad3" type="radio" name="rad">

<section style="background: #FFC765">


<h1>Card 3</h1>


<p>Description 3</p>


<label for="rad2"><i class="fa fa-chevron-left"></i></label>


<label for="rad4"><i class="fa fa-chevron-right"></i></label>

</section>

<input id="rad4" type="radio" name="rad">

<section style="background: #ED5565">


<h1>Card 4</h1>


<p>Description 4</p>


<label for="rad3"><i class="fa fa-chevron-left"></i></label>


<label for="rad1"><i class="fa fa-chevron-right"></i></label>

</section>
</div>

Las reglas CSS para el control deslizante de la tarjeta.

input[type="radio"] { display: none; }

input[type="radio"]:checked + section { display: block; }

body {

font-family: 'Open Sans', sans-serif;

font-weight: lighter;
}

.container {

position: absolute;

left: 50%;

margin-left: -200px;

top: 50%;

margin-top: -225px;

width: 400px;

height: 450px;
}

.container section {

display: none;

height: 100%;

padding: 15px;

background: #449df5;

color: #fff;

text-align: center;
}

.container section h1 {

margin-bottom: 0;

font-family: 'Nunito', sans-serif;

font-weight: lighter;

font-size: 2em;
}

.container section p {

width: 75%;

margin: 0 auto;

padding: 10px;
}

.container section label {

position: absolute;

display: inline-block;

cursor: pointer;

font-size: 1.5em;

bottom: 0;
}

.container section label:nth-child(odd) { right: 120px; }

.container section label:nth-child(even) { left: 120px; }

.container section > i {

font-size: 6em !important;

margin-top: 50px;

margin-bottom: 25px;
}