Slider CSS puro con fotogramas clave CSS3

Vista prévia

Descripción

Un componente de slider CSS puro que cada nueva imagen se desliza sobre la anterior con animaciones CSS3.

Funcionamiento

Agregue una lista de imágenes al control deslizante.

<ul class="slides">

<li class="first" id="slide-1"><img src="1.jpg"></li>

<li id="slide-2"><img src="2.jpg"></li>

<li id="slide-3"><img src="3.jpg"></li>

<li id="slide-4"><img src="4.jpg"></li>

<li id="slide-5"><img src="5.jpg"></li>

<li id="slide-6"><img src="6.jpg"></li>

<li id="slide-7"><img src="7.jpg"></li>
</ul>

Cree una navegación de miniaturas para el control deslizante.

<ul class="thumbs">

<li><a href="#slide-1"><img src="thumb1.jpg"><span>This is image 1</span></a></li>

<li><a href="#slide-2"><img src="thumb2.jpg"><span>This is image 2</span></a></li>

<li><a href="#slide-3"><img src="thumb3.jpg"><span>This is image 3</span></a></li>

<li><a href="#slide-4"><img src="thumb4.jpg"><span>This is image 4</span></a></li>

<li><a href="#slide-5"><img src="thumb5.jpg"><span>This is image 5</span></a></li>

<li><a href="#slide-6"><img src="thumb6.jpg"><span>This is image 6</span></a></li>

<li><a href="#slide-7"><img src="thumb7.jpg"><span>This is image 7</span></a></li>
</ul>

Los principales estilos CSS para el control deslizante.

ul.slides {

overflow: hidden;

clear: both;

border: #333 solid 4px;
}

ul.slides, ul.slides li, ul.slides a, ul.slides img {

width: 705px;

height: 350px;

position: relative;
}

ul.slides li {

position: absolute;

z-index: 50;
}

ul.slides li:not(:target) {

-webkit-animation-name: noTarget;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;
}

Los estilos CSS para la navegación de miniaturas.

ul.thumbs li {

float: left;

margin-bottom: 10px;

margin-right: 9px;
}

ul.thumbs a {

display: block;

position: relative;

width: 85px;

height: 55px;

border: 4px solid transparent;

font: bold 12px/25px Arial, sans-serif;

color: #515151;

text-decoration: none;

text-shadow: 1px 1px 0px rgba(255, 255, 255, .25), inset 1px 1px 0px rgba(0,0,0, .15);
}

ul.thumbs img { border: #333 solid 4px; }

ul.thumbs li a:hover span {

position: absolute;

z-index: 101;

bottom: -30px;

left: -22px;

display: block;

width: 100px;

height: 25px;

text-align: center;

border-radius: 3px;

-webkit-box-shadow: 0px 1px 0px rgba(0,0,0, .4);

-moz-box-shadow: 0px 1px 0px rgba(0,0,0, .4);

box-shadow: 0px 1px 0px rgba(0,0,0, .4);

background: #fff; /* older browsers */

background: -webkit-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);

background: -moz-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);

background: -o-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);

background: -ms-linear-gradient(top, #fff, 0%, #bcbcbc, 100%);

background: linear-gradient(top, #fff, 0%, #bcbcbc, 100%);
}

ul.thumbs li a:hover span:before {

width: 0px;

height: 0px;

border-bottom: 5px solid #fff;

border-left: 5px solid transparent;

border-right: 5px solid transparent;

content: '';

position: absolute;

top: -5px;

left: 44px;
}

ul.thumbs li:first-child a:hover span { left: -3px; }

ul.thumbs li:first-child a:hover span:before { left: 25px; }

La animación CSS3 para el deslizador.

@-webkit-keyframes 'slide' {
 0% {
left: -500px;
}
 100% {
left: 0px;
}
}

ul.slides li:target {

z-index: 100;

-webkit-animation-name: slide;

-webkit-animation-duration: 1s;

-webkit-animation-iteration-count: 1;
}

/* not target */

@-webkit-keyframes 'noTarget' {
 0% {
z-index: 75;
}
 100% {
z-index: 75;
}
}