Responsive CSS Vertical Image Slider with Thumbnail Plugin

Responsive CSS vertical slider with thumbnails where users can slide between images by clicking on the side mobility. Supported by CSS3 FlexBox and transforming properties.

responsive slider with vertical thumbnails, vertical image slider html css, vertical image slider bootstrap, auto scroll vertical slider plugin, automatic multiple image slider

How to make use of it:

1. Create a list of images for mixing/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>

2. Create mini navigation to mix.

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

3. The main css for 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; }

4. Mini navigation thumbnail.

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

5. CSS animation.

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

responsive vertical image slider, responsive css vertical slider with thumbnails Plugin/Codepen