<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <ul class="slides"> <li id="slide1"><img src="http://res.cloudinary.com/huijing/image/upload/lw1.jpg" alt="" /></li> <li id="slide2"><img src="http://res.cloudinary.com/huijing/image/upload/lw2.jpg" alt="" /></li> <li id="slide3"><img src="http://res.cloudinary.com/huijing/image/upload/lw3.jpg" alt="" /></li> <li id="slide4"><img src="http://res.cloudinary.com/huijing/image/upload/lw4.jpg" alt="" /></li> <li id="slide5"><img src="http://res.cloudinary.com/huijing/image/upload/lw5.jpg" alt="" /></li> </ul> <ul class="thumbnails"> <li> <a href="#slide1"><img src="http://res.cloudinary.com/huijing/image/upload/lw1.jpg" /></a> </li> <li> <a href="#slide2"><img src="http://res.cloudinary.com/huijing/image/upload/lw2.jpg" /></a> </li> <li> <a href="#slide3"><img src="http://res.cloudinary.com/huijing/image/upload/lw3.jpg" /></a> </li> <li> <a href="#slide4"><img src="http://res.cloudinary.com/huijing/image/upload/lw4.jpg" /></a> </li> <li> <a href="#slide5"><img src="http://res.cloudinary.com/huijing/image/upload/lw5.jpg" /></a> </li> </ul> </div>

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; } .slides, .slides li { width: 75vmin; height: 100vmin; } .slides img { height: 100vmin; object-fit: cover; object-position: top; } .slides li { position: absolute; z-index: 1; } @keyframes slide { 0% { transform: translateY(-100%); } 100% { transform: translateY(0%); } } .slides li:target { z-index: 3; -webkit-animation: slide 1s 1; } @keyframes hidden { 0% { z-index: 2; } 100% { z-index: 2; } } .slides li:not(:target) { -webkit-animation: hidden 1s 1; }