Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive CSS vertical slider with thumbnails
<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>

Responsive CSS vertical slider with thumbnails

An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.

A Pen by Chen Hui Jing on CodePen.

License.

/*
An experiment to create a completely responsive vertical slider with thumbnails using only CSS, and retaining the aspect ratio of the images.
*/
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.