Control deslizante de contenido solo HTML/CSS3

Vista prévia

Descripción

Un deslizador de contenido suave y receptivo construido sobre entradas de radio HTML y animaciones CSS3 & modelo Flexbox.

Funcionamiento

Agregue contenido deslizante y controles de entrada de radio a su página web de la siguiente manera:

<div class="slider">

<input type="radio" name="slider" title="slide1" checked="checked" class="slider__nav"/>

<input type="radio" name="slider" title="slide2" class="slider__nav"/>

<input type="radio" name="slider" title="slide3" class="slider__nav"/>

<input type="radio" name="slider" title="slide4" class="slider__nav"/>

<div class="slider__inner">


<div class="slider__contents">



<h2 class="slider__caption">Slide 1</h2>



<p class="slider__txt">Content 1</p>


</div>


<div class="slider__contents">



<h2 class="slider__caption">Slide 2</h2>



<p class="slider__txt">Content 2</p>


</div>


<div class="slider__contents">



<h2 class="slider__caption">Slide 3</h2>



<p class="slider__txt">Content 3</p>


</div>


<div class="slider__contents">



<h2 class="slider__caption">Slide 4</h2>



<p class="slider__txt">Content 4</p>


</div>

</div>
</div>

El CSS para el estilo del deslizador.

.slider {

height: 100%;

position: relative;

overflow: hidden;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: row nowrap;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap;

-webkit-box-align: end;

-webkit-align-items: flex-end;

-ms-flex-align: end;

align-items: flex-end;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;
}

.slider__nav {

width: 12px;

height: 12px;

margin: 2rem 12px;

border-radius: 50%;

z-index: 10;

outline: 6px solid #ccc;

outline-offset: -6px;

box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);

cursor: pointer;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

-webkit-backface-visibility: hidden;

backface-visibility: hidden;
}

.slider__nav:checked {

-webkit-animation: check 0.5s linear forwards;

animation: check 0.5s linear forwards;
}

.slider__nav:checked:nth-of-type(1) ~ .slider__inner {

-webkit-transform: translateX(0%);

transform: translateX(0%);
}

.slider__nav:checked:nth-of-type(2) ~ .slider__inner {

-webkit-transform: translateX(-25%);

transform: translateX(-25%);
}

.slider__nav:checked:nth-of-type(3) ~ .slider__inner {

-webkit-transform: translateX(-50%);

transform: translateX(-50%);
}

.slider__nav:checked:nth-of-type(4) ~ .slider__inner {

-webkit-transform: translateX(-75%);

transform: translateX(-75%);
}

.slider__inner {

position: absolute;

top: 0;

left: 0;

width: 400%;

height: 100%;

-webkit-transition: all 1s ease-out;

transition: all 1s ease-out;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-flow: row nowrap;

-ms-flex-flow: row nowrap;

flex-flow: row nowrap;
}

.slider__contents {

height: 100%;

padding: 2rem;

text-align: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

flex: 1;

-webkit-flex-flow: column nowrap;

-ms-flex-flow: column nowrap;

flex-flow: column nowrap;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;
}

.slider__image { font-size: 2.7rem; }

.slider__caption {

font-weight: 700;

margin: 2rem 0 1rem;

text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

text-transform: uppercase;
}

.slider__txt {

color: #999;

margin-bottom: 3rem;

max-width: 300px;
}

Las reglas CSS3 para las animaciones de comprobación.

@-webkit-keyframes
 check {
50% {
 outline-color: #333;
 box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
 100% {
 outline-color: #333;
 box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}

@keyframes
 check {
50% {
 outline-color: #333;
 box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
}
 100% {
 outline-color: #333;
 box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
}
}