<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<main id='slider'>
<button class='trigger first'></button>
<button class='trigger last'></button>
<button class='trigger prev'></button>
<button class='trigger next'></button>
<section class='frame'>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
<article class='item'>
<div class='inset'>
<h1 class='title'>Lorem Ipsum</h1>
<div class='caption'>dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</div>
</div>
</article>
</section>
</main>
<script>
$('#slider .item').each(function(i){
var $this = $(this),
width = $this.width(),
left = width * i,
color = 25 * i;
$this.css({ left: left })
.find('.inset').css({ backgroundColor: 'hsl(' + color + ',65%,50%)' });
});
$('#slider .item .inset').each(function(){
var $this = $(this),
color = $this.css('backgroundColor');
$this.append('<div class="shadow"></div>');
$this.find('.shadow').css({
position: 'absolute',
left: 0, right: 0, bottom: 0,
'box-shadow': '0 0 25px 25px ' + color
});
});
$('.trigger').on('click',function(){
var $this = $(this),
width = $('.item').width() * 4,
speed = 500;
if ( $this.hasClass('first') ) {
$('.frame').animate({ scrollLeft: 0 },speed * 3);
} else if ( $this.hasClass('last') ) {
$('.frame').animate({ scrollLeft: $('.frame')[0].scrollWidth },speed * 3);
} else if ( $this.hasClass('prev') ) {
$('.frame').animate({ scrollLeft: '-=' + width },speed);
} else if ( $this.hasClass('next') ) {
$('.frame').animate({ scrollLeft: '+=' + width },speed);
}
});
</script>
body {
font-family: sans-serif;
font-size: 10pt;
color: #FFF;
font-smoothing: antialiased;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
#slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 625px;
height: 150px;
margin: auto;
border-radius: 5px;
background: #DDD;
overflow: hidden;
}
#slider .trigger {
cursor: pointer;
position: absolute;
width: 35px;
height: 50%;
padding: 0;
margin: 0;
outline: 0;
border: 0;
background: transparent;
}
#slider .trigger:hover {
background: rgba(255, 255, 255, 0.5);
}
#slider .trigger:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
border-style: solid;
}
#slider .first {
left: 0;
top: 0;
}
#slider .first:before {
left: 5px;
border-width: 3px 0 0 3px;
border-color: #333 transparent transparent #333;
box-shadow: inset 2px 2px #DDD, inset 5px 5px #333;
transform: rotate(-45deg);
}
#slider .last {
right: 0;
top: 0;
}
#slider .last:before {
right: 5px;
border-width: 0 3px 3px 0;
border-color: transparent #333 #333 transparent;
box-shadow: inset -2px -2px #DDD, inset -5px -5px #333;
transform: rotate(-45deg);
}
#slider .prev {
left: 0;
bottom: 0;
}
#slider .prev:before {
left: 5px;
border-width: 3px 0 0 3px;
border-color: #333 transparent transparent #333;
transform: rotate(-45deg);
}
#slider .next {
right: 0;
bottom: 0;
}
#slider .next:before {
right: 5px;
border-width: 3px 3px 0 0;
border-color: #333 #333 transparent transparent;
transform: rotate(45deg);
}
#slider .frame {
position: absolute;
top: 0;
left: 35px;
right: 35px;
bottom: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
overflow: hidden;
}
#slider .frame .item {
position: absolute;
top: 0;
bottom: 0;
width: 25%;
height: 100%;
}
#slider .frame .item .inset {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 10px 5px;
overflow: hidden;
}
#slider .frame .item .inset .title {
margin: 10px 0;
font-weight: bold;
text-align: center;
}
#slider .frame .item .inset .caption {
margin: 10px;
font-size: 8pt;
text-align: justify;
}
