<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 ---------->
<div class="body">
<div class="slider-container" id="slider-container">
<div class="slider-outer clearfix" id="slider-outer">
<div class="slide clearfix">
<div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/DI64TAJTIS.jpg"/>
<div class="overlay"></div>
</div>
<div class="slide-details">
<div class="header">
<h2>Aperiri Sapientem</h2>
</div>
<p>Nam ante est euismod id consequat eget congue et lacus Sed consequat laoreet purus efficitur semper turpis pretium vitae.</p>
<button>call to action</button>
</div>
</div>
<div class="slide clearfix">
<div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/FOWR0O1WQ6.jpg"/>
<div class="overlay"></div>
</div>
<div class="slide-details">
<div class="header">
<h2>Erant Aperiri<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2>
</div>
<p>congue et lacus Sed consequat laoreet purus efficitur semper turpis pretium vitae Nam ante est euismod id consequat eget.</p>
<button>call to action</button>
</div>
</div>
<div class="slide clearfix">
<div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/2YMA649WFC.jpg"/>
<div class="overlay"></div>
</div>
<div class="slide-details">
<div class="header">
<h2>Lorem ipsum dolor sit amet<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2>
</div>
<p>Ante est, euismod id consequat eget, congue et lacus. Sed consequat laoreet purus, efficitur semper turpis pretium vitae</p>
<button>call to action</button>
</div>
</div>
<div class="slide clearfix">
<div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/ONV344KX9K.jpg"/>
<div class="overlay"></div>
</div>
<div class="slide-details">
<div class="header">
<h2>consectetur adipiscing elit<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2>
</div>
<p>Sed finibus malesuada sem sed placerat. Sed id neque mattis dui hendrerit mattis. Etiam ultrices varius risus.</p>
<button>call to action</button>
</div>
</div>
<div class="slide clearfix">
<div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/J98HWXTPPV.jpg"/>
<div class="overlay"></div>
</div>
<div class="slide-details">
<div class="header">
<h2>tempus nulla lacinia<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2>
</div>
<p>Maecenas euismod mauris pretium nibh vestibulum pellentesque. Sed porta malesuada viverra, Pellentesque egestas faucibus turpis.</p>
<button>call to action</button>
</div>
</div>
<div class="slide clearfix">
<div class="slide-thump"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/UK8ZUNVEG6.jpg"/>
<div class="overlay"></div>
</div>
<div class="slide-details">
<div class="header">
<h2>Nam consequat felis<span class="top"></span><span class="bottom"></span><span class="left-border"></span></h2>
</div>
<p>In blandit lorem ut ante cursus pharetra Nulla ultrices, metus vehicula tristique sagittis lectus dui fermentum quam.</p>
<button>call to action</button>
</div>
</div>
</div>
<div class="slide-controls">
<div class="left">‹</div>
<div class="right">›</div>
</div>
</div>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
width: 100%;
background-color: #ffffff;
user-select: none;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.slider-container {
width: 100%;
overflow: hidden;
position: relative;
}
.slider-outer {
transition: all 1.5s cubic-bezier(0.13, 0.56, 0.58, 0.97);
height: 100%;
}
.slide {
width: 100%;
height: 100vh;
min-height: 300px;
float: left;
overflow: hidden;
position: relative;
}
.slide-thump,
.slide-details {
float: left;
}
.slide-thump,
.slide-details {
width: 50%;
height: 100%;
position: relative;
}
.slide-thump img {
width: 100%;
height: 100%;
}
.overlay {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-color: transparent;
transition: all 3s ease;
}
.overlay:before, .overlay:after {
content: '';
display: block;
position: absolute;
top: 30px;
left: 30px;
bottom: 30px;
right: 30px;
transition: all 1s ease;
color: #b1b1b1;
}
.overlay:before {
border-left: 1px solid;
border-right: 1px solid;
transform: scale3d(1, 0, 1);
}
.overlay:after {
border-top: 1px solid;
border-bottom: 1px solid;
transform: scale3d(0, 1, 1);
}
.slide-thump:hover .overlay:before,
.slide-thump:hover .overlay:after {
transform: scale3d(1, 1, 1);
}
.slide-thump:hover .overlay {
transition: all 1s ease;
background-color: rgba(0, 0, 0, 0.7);
}
/*--------------
slide details
---------------*/
.slide-details {
padding: 15vh 60px;
text-align: center;
background-color: #ffffff;
}
.header {
overflow: hidden;
}
.slide-details h2 {
position: relative;
box-shadow: inset 0 0 0 2px #777;
display: inline-block;
padding: 14px 40px;
overflow: hidden;
color: #555;
}
.slide-details h2:before, .slide-details h2:after {
content: '';
display: block;
width: 30px;
height: 30px;
position: absolute;
background-color: #fff;
border: 2px solid #777;
border-radius: 30px;
}
.slide-details h2:before {
top: -15px;
left: -15px;
}
.slide-details h2:after {
top: -15px;
left: calc(100% - 15px);
}
/* corners border */
.slide-details p {
font-size: 1.7em;
color: #777;
position: relative;
padding: 30px 0px;
}
.slide-details p:before {
content: '';
display: block;
width: 100%;
height: 3px;
background-color: #888;
position: absolute;
bottom: 0;
transform: scale3d(0.4, 1, 1);
transition: all 1s ease;
}
.slide-details p:hover:before {
transform: scale3d(0.7, 1, 1);
}
.slide-details button {
margin-top: 10vh;
padding: 10px 40px;
font-size: 1.4em;
color: #77b5e2;
text-transform: uppercase;
background-color: transparent;
border: 1px solid #77b5e2;
cursor: pointer;
transition: background-color 1s ease-in-out, color .7s ease-in-out;
}
.slide-details button:hover {
background-color: #77b5e2;
color: #fff;
}
.slide-controls {
position: absolute;
height: 60px;
line-height: 50px;
text-align: center;
font-size: 3em;
color: #fff;
width: 200px;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.slide-controls .left,
.slide-controls .right {
position: absolute;
top: 0;
width: 50%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: all 1s ease;
}
.slide-controls .left:hover,
.slide-controls .right:hover {
background-color: rgba(0, 0, 0, 0.7);
}
.slide-controls .right {
right: 0;
}
/* slides aniamtion */
.slide .slide-thump,
.slide-details .header,
.slide-details p {
transition: all 1s ease;
}
.slide .slide-thump {
transform: translate3d(0, -100%, 1px);
transition-delay: 0s;
}
.slide-details .header {
transform: translate3d(0, 200%, 1px);
transition: all 1s linear;
transition-delay: 0.75s;
}
.slide-details p {
transform: scale3d(0, 0, 1);
transition-delay: 1.5s;
}
.slide.active .slide-thump,
.slide.active .slide-details .header {
transform: translate3d(0, 0, 1px);
}
.slide.active .slide-details p {
transform: scale3d(1, 1, 1);
}
window.onload = function () {
'use strict';
function each(e, callback) {
var i = 0, l = e.length;
for (; i < l; i++) {
callback.call(e[i], i, e[i]);
}
}
var slideDuration = 6000, // slide duration in ms
pauseOnHover = false, // pause auto play on hover
slideContainer = document.getElementById('slider-container'),
slideOuter = document.getElementById('slider-outer'),
slides = slideOuter.getElementsByClassName('slide'),
slidesLen = slides.length,
slidePercent = 100 / slidesLen,
lastSlide = slidesLen - 1,
slideLeft = document.getElementsByClassName('left')[0],
slideRight = document.getElementsByClassName('right')[0],
translateLen = slidePercent * -1,
translateBy = 0,
threshold = 1.3,
i = 0,
slideInterval;
// slides outer container width in percent
// equal to slides number * 100
slideOuter.style.width = slidesLen * 100 + '%';
// slide width
each(slides, function (i, slide) {
slide.style.width = slidePercent + '%';
});
//add active class to current slide
function activeSlide() {
each(slides, function (index, e) {
e.classList.remove('active');
});
slides[i].classList.add('active');
}
activeSlide();
function translateSlider() {
translateBy = i * translateLen;
slideOuter.style.transform = 'translateX('+ translateBy +'%)';
activeSlide();
slideOuter.removeEventListener('transitionend', transitionEnd);
slideOuter.addEventListener('transitionend', transitionEnd);
}
function slideForward() {
i++;
if (i > lastSlide) {i = 0;}
translateSlider();
}
function slideBackward() {
i--;
if (i < 0) {i = lastSlide;}
translateSlider();
}
function autoSlideInterval () {
window.clearInterval(slideInterval);
slideInterval = window.setInterval(slideForward, slideDuration);
}
autoSlideInterval();
// next prev controls
function setControls(control, d) {
control.addEventListener('click', function () {
window.clearInterval(slideInterval);
d === -1 ? slideBackward() : slideForward();
autoSlideInterval();
});
}
setControls(slideLeft, -1);
setControls(slideRight, 1);
if (pauseOnHover) {
slideContainer.addEventListener('mouseover', function () {
window.clearInterval(slideInterval);
});
slideContainer.addEventListener('mouseout', function () {
autoSlideInterval();
});
}
function swipeSlide() {
var slideLeft = slideOuter.offsetLeft,
// translate when movedLength pass it
slideOuterWidth = slideOuter.clientWidth,
startPoint,
movedLength,
diff;
function mouseMoveFunction(m) {
movedLength = (m.pageX - startPoint) / slideOuterWidth * 100;
var diff = translateBy + movedLength;
slideOuter.style.transform = 'translate3d('+ diff +'%, 0, 0)';
}
slideOuter.onmousedown = function (e) {
window.clearInterval(slideInterval);
slideOuter.style.transition = 'all 0s ease';
startPoint = e.pageX;
slideOuter.addEventListener('mousemove', mouseMoveFunction);
};
slideOuter.onmouseup = function (e) {
slideOuter.removeEventListener('mousemove', mouseMoveFunction);
slideOuter.style.transition = '';
if (movedLength >= threshold) {
slideBackward();
}
else if (movedLength < -threshold ) {
slideForward();
}
else {
slideOuter.style.transform = 'translate3d('+translateBy+'%, 0, 0)';
}
autoSlideInterval();
};
}
swipeSlide();
};
