<body>
<div class="container">
<div id="slider">
<div id="slides">
<div class="slide"><img src="https://source.unsplash.com/y1yQQmozTBw/1000x400" width="100%">
<div class="caption">
<h1>I'm a header</h1>
<p>And I'm a paragraph number 1</p>
<div class="controllers">
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
<div class="slide"><img src="https://source.unsplash.com/l82NzBSYbj0/1000x400" width="100%">
<div class="caption">
<h1>I'm a header</h1>
<p>And I'm a paragraph number 2</p>
<div class="controllers">
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
<div class="slide"><img src="https://source.unsplash.com/ZOtnmYS0JVg/1000x400" width="100%">
<div class="caption">
<h1>I'm a header</h1>
<p>And I'm a paragraph number 3</p>
<div class="controllers">
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
<div class="slide"><img src="https://source.unsplash.com/5X39cfzKX3o/1000x400">
<div class="caption">
<h1>I'm a header</h1>
<p>And I'm a paragraph number 4</p>
<div class="controllers">
<span class="left"></span>
<span class="right"></span>
</div>
</div>
</div>
</div>
<nav id="thumbs">
<ul>
<li>
<a href="#">
<img src="https://source.unsplash.com/y1yQQmozTBw/100x50">
</a>
</li>
<li>
<a href="#">
<img src="https://source.unsplash.com/l82NzBSYbj0/100x50">
</a>
</li>
<li>
<a href="#">
<img src="https://source.unsplash.com/ZOtnmYS0JVg/100x50">
</a>
</li>
<li>
<a href="#">
<img src="https://source.unsplash.com/5X39cfzKX3o/100x50">
</a>
</li>
</ul>
</nav>
</div>
</div>
</body>* {
margin: 0;
padding: 0;
}
body {
color: #333;
font-size: 13px;
background: #f4f4f4;
font-family: sans-serif;
}
.container {
width: 90%;
max-width: 960px;
margin: 30px auto;
text-align: center;
position: relative;
}
p {
padding-top: 10px;
}
#slider {
background-color: #fff;
overflow: hidden;
}
img {
width: 100%;
}
#slides {
height: 100%;
width: 400%;
}
.slide {
/* dummy width */
width: 25%;
float: left;
position: relative;
}
#thumbs {
position: absolute;
display: block;
bottom: 10px;
left: 10px;
}
a, a:visited {
color: #0196e3;
text-decoration: none;
outline: none;
display: block;
height: 48px;
border: 1px solid #fff;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
opacity: 0.8;
}
ul {
margin: 0;
padding: 0;
}
#thumbs li {
display: inline-block;
list-style: none;
}
#thumbs li a {
width: 100px;
height: 50px;
}
li.active a, li.active a:hover {
border: 1px solid #0196e3;
opacity: 1;
}
.caption {
position: absolute;
display: inline-block;
top: 10px;
right: 10px;
padding: 20px 40px;
background-color: rgba(0,0,0,0.8);
color: #fff;
text-align: left;
}
.caption .controllers span {
display: inline-block;
list-style: none;
width: 13px;
height: 13px;
position: absolute;
top: calc(50% - 8px);
cursor: pointer;
}
.caption .controllers .right {
right: 15px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
transform: rotate(45deg);
}
.caption .controllers .left {
left: 15px;
border-top: 3px solid #fff;
border-left: 3px solid #fff;
transform: rotate(-45deg);
}
@media (max-width: 658px) {
#thumbs li a {
width: 50px;
height: 25px;
}
}$(document).ready(function(){
// set automatic full container width
$("#slides").css("width", $("#slides .slide").length * 100 + "%")
$(".slide").css("width", 100 / $("#slides .slide").length + "%")
var totalWidth = 0;
$("#slides .slide").each(function(i){
totalWidth += 100 + "%";
});
$("#slides").width(totalWidth);
$("#thumbs ul li a").click(function(event, keepScroll){
event.preventDefault();
$("li").removeClass("active").addClass("inactive");
$(this).parent().addClass("active");
var pos = $(this).parent().prevAll().length;
$("#slides").stop().animate({marginLeft:-"100" *[pos]+"%"}, 450);
//stop autoscroll
if(!autoScroll) clearInterval(itvl);
});
//make first active
$("#thumbs ul li:first").addClass("active").siblings().addClass("inactive");
//set right scroll
$('.controllers .right').on('click', function(){
if(curr == -1) return false;
$("#thumbs ul li a").eq(curr%$("#thumbs ul li a").length).trigger("click",[true]);
curr++;
});
$('.controllers .left').on('click', function(keepScroll){
var currSlide = $(".active");
var curr = $(".active").index();
var totalLength = $("#thumbs ul li a").length - 1;
$(currSlide).removeClass('active');
if (curr == 0 ){
$("#slides").stop().animate({marginLeft:-"100" *[totalLength]+"%"}, 450);
$("#thumbs ul li:last-child").addClass('active');
} else {
$("#slides").stop().animate({marginLeft:-"100" *[curr - 1]+"%"}, 450);
$(currSlide).prev().addClass('active');
}
if(!autoScroll) clearInterval(itvl);
});
var autoScrollOn = true;
//set autoscroll
var curr = 1;
function autoScroll(){
if(curr == -1) return false;
$("#thumbs ul li a").eq(curr%$("#thumbs ul li a").length).trigger("click",[true]);
curr++;
}
//set auto speed
var itvl = setInterval(function(){autoScroll()}, 6000);
});
External CSS
This Pen doesn't use any external CSS resources.