Check out this Cool Responsive CSS vertical slider with thumbnails Designed by Chen Hui Jing.
vertical slider thumbnails
HTML
[code language=”html”]
<div class="container">
<ul class="slides">
<li id="slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" alt="" /></li>
<li id="slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" alt="" /></li>
<li id="slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" alt="" /></li>
<li id="slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" alt="" /></li>
<li id="slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" alt="" /></li>
</ul>
<ul class="thumbnails">
<li>
<a href="#slide1"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw1.jpg" /></a>
</li>
<li>
<a href="#slide2"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw2.jpg" /></a>
</li>
<li>
<a href="#slide3"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw3.jpg" /></a>
</li>
<li>
<a href="#slide4"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw4.jpg" /></a>
</li>
<li>
<a href="#slide5"><img src="https://cdn.rawgit.com/huijing/filerepo/gh-pages/lw5.jpg" /></a>
</li>
</ul>
</div>
[/code]
CSS / SCSS
[code language=”css”]
html {
box-sizing: border-box;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
}
.thumbnails {
display: flex;
flex-direction: column;
line-height: 0;
li {
flex: auto;
}
a {
display: block;
}
img {
width: 30vmin;
height: 20vmin;
object-fit: cover;
object-position: top;
}
}
.slides {
overflow: hidden;
width: 75vmin;
height: 100vmin;
li {
width: 75vmin;
height: 100vmin;
position: absolute;
z-index: 1;
}
img {
height: 100vmin;
object-fit: cover;
object-position: top;
}
}
.slides li:target {
z-index: 3;
-webkit-animation: slide 1s 1;
}
.slides li:not(:target) {
-webkit-animation: hidden 1s 1;
}
@keyframes slide {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}
@keyframes hidden {
0% {
z-index: 2;
}
100% {
z-index: 2;
}
}
[/code]
