Deslizador de imagen vertical adaptable con CSS puro

Vista prévia

Descripción

Un deslizador de imagen vertical adaptable solo para CSS donde los usuarios pueden deslizarse entre imágenes haciendo clic en la navegación de miniaturas lateral. Impulsado por CSS3 Flexbox y propiedades de transformación.

Funcionamiento

Cree una lista de imágenes para el control deslizante.

<ul class="slides">

<li id="slide1"><img src="1.jpg" alt="" /></li>

<li id="slide2"><img src="2.jpg" alt="" /></li>

<li id="slide3"><img src="3.jpg" alt="" /></li>

<li id="slide4"><img src="4.jpg" alt="" /></li>

<li id="slide5"><img src="5.jpg" alt="" /></li>
</ul>

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

<ul class="thumbnails">

<li>


<a href="#slide1"><img src="1.jpg" /></a>

</li>

<li>


<a href="#slide2"><img src="2.jpg" /></a>

</li>

<li>


<a href="#slide3"><img src="3.jpg" /></a>

</li>

<li>


<a href="#slide4"><img src="4.jpg" /></a>

</li>

<li>


<a href="#slide5"><img src="5.jpg" /></a>

</li>
</ul>

El CSS principal para el control deslizante.

.slides { overflow: hidden; }

.slides, .slides li {

width: 75vmin;

height: 100vmin;
}

.slides img {

height: 100vmin;

-o-object-fit: cover;

object-fit: cover;

-o-object-position: top;

object-position: top;
}

.slides li {

position: absolute;

z-index: 1;
}

.slides li:target {

z-index: 3;

-webkit-animation: slide 1s 1;
}

.slides li:not(:target) { -webkit-animation: hidden 1s 1; }

Estilo de la navegación en miniatura.

.thumbnails {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

line-height: 0;
}

.thumbnails li {

-webkit-box-flex: 1;

-ms-flex: auto;

flex: auto;
}

.thumbnails a { display: block; }

.thumbnails img {

width: 30vmin;

height: 20vmin;

-o-object-fit: cover;

object-fit: cover;

-o-object-position: top;

object-position: top;
}

Las animaciones CSS.

@-webkit-keyframes
 slide {
0% {
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
}
 100% {
 -webkit-transform: translateY(0%);
 transform: translateY(0%);
}
}

@keyframes
 slide {
0% {
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
}
 100% {
 -webkit-transform: translateY(0%);
 transform: translateY(0%);
}
}

@-webkit-keyframes
 hidden {
0% {
 z-index: 2;
}
 100% {
 z-index: 2;
}
}

@keyframes
 hidden {
0% {
 z-index: 2;
}
 100% {
 z-index: 2;
}
}