Responsive Vertical Image Slider With Pure CSS

A responsive, CSS-only vertical image slider where the users are able to slide between images by clicking on the side thumbnail navigation. Powered by CSS3 flexbox and transform properties.

How to use it:

Create a list of images for the slider.

<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>

Create a thumbnail navigation for the slider.

<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>

The primary CSS for the slider.

.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; }

Style the thumbnail navigation.

.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;
}

The CSS animations.

@-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;
}
}