<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="slideshow">
<div class="slideshow__contentWrap">
<h2 class="slideshow__title">True Detective</h2>
<p class="slideshow__text">True Detective is an American crime drama television series created and written by Nix Pizzolatto. The series is broadcast by the premium cable network HBO in the United States.</p>
</div>
<ul class="slideshow__container">
<li class="slideshow__item"> <img class="slideshow__image" src="http://images.alphacoders.com/483/483700.jpg"/></li>
<li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/></li>
<li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/L3PZkY5leFs/maxresdefault.jpg"/></li>
<li class="slideshow__item"><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/></li>
</ul>
<div class="slideshow__back">
<div class="slideshow__slidein">
<div class="overlay"></div><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/>
<h2 class="slideTitle">PREVIOUS SLIDE </h2>
</div>
<div class="slideshow__block"><img class="close" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"/></div>
<div class="slideshow__prev">
<svg width="32px" height="32px" viewBox="1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="prevBtn" sketch:type="MSArtboardGroup" stroke="#1B2023" stroke-width="2">
<g id="Btn" sketch:type="MSLayerGroup" transform="translate(16.000000, 16.000000) scale(-1, 1) translate(-16.000000, -16.000000) ">
<path d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
<circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle>
</g>
</g>
</g>
</svg>
</div>
</div>
<div class="slideshow__forward">
<div class="slideshow__slidein">
<div class="overlay"></div><img class="slideshow__image" src="https://i.ytimg.com/vi/7IX7c_-7ZjQ/maxresdefault.jpg"/>
<h2 class="slideTitle">NEXT SLIDE</h2>
</div>
<div class="slideshow__block"><img class="close" src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjEyOHB4IiBoZWlnaHQ9IjEyOHB4IiB2aWV3Qm94PSIwIDAgNjEyLjA0MyA2MTIuMDQzIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA2MTIuMDQzIDYxMi4wNDM7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8ZyBpZD0iY3Jvc3MiPgoJCTxnPgoJCQk8cGF0aCBkPSJNMzk3LjUwMywzMDYuMDExbDE5NS41NzctMTk1LjU3N2MyNS4yNy0yNS4yNjksMjUuMjctNjYuMjEzLDAtOTEuNDgyYy0yNS4yNjktMjUuMjY5LTY2LjIxMy0yNS4yNjktOTEuNDgxLDAgICAgIEwzMDYuMDIyLDIxNC41NTFMMTEwLjQ0NSwxOC45NzRjLTI1LjI2OS0yNS4yNjktNjYuMjEzLTI1LjI2OS05MS40ODIsMHMtMjUuMjY5LDY2LjIxMywwLDkxLjQ4MkwyMTQuNTQsMzA2LjAzM0wxOC45NjMsNTAxLjYxICAgICBjLTI1LjI2OSwyNS4yNjktMjUuMjY5LDY2LjIxMywwLDkxLjQ4MWMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MiwwbDE5NS41NzctMTk1LjU3NmwxOTUuNTc3LDE5NS41NzYgICAgIGMyNS4yNjksMjUuMjcsNjYuMjEzLDI1LjI3LDkxLjQ4MSwwYzI1LjI3LTI1LjI2OSwyNS4yNy02Ni4yMTMsMC05MS40ODFMMzk3LjUwMywzMDYuMDExeiIgZmlsbD0iIzAwMDAwMCIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K"/></div>
<div class="slideshow__next">
<svg width="32px" height="32px" viewBox="-1 -1 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g class="Btn" sketch:type="MSLayerGroup" stroke="#1B2023" stroke-width="2">
<path class="line" d="M16,1 L25.6,16.5428571 L16,31" class="line" stroke-linecap="round" sketch:type="MSShapeGroup"></path>
<circle class="circle" sketch:type="MSShapeGroup" cx="15" cy="15" r="15"></circle>
</g>
</g>
</svg>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var imgWidth = $(".slideshow__image").width(),
$slider = $(".slideshow__container"),
$nextButton = $(".slideshow__next"),
$prevButton = $(".slideshow__prev"),
closeBlock = $(".slideshow__block"),
slideInBlock = (".slideshow__slidein"),
slideNext = $('.slideshow__forward').find('.slideshow__slidein'),
slideBack = $('.slideshow__back').find('.slideshow__slidein'),
clickCount = 0,
clickCountImg = 1;
$nextButton.click(function() {
var circle = $(this).find('.circle'),
line = $(this).find('.line'),
block = $(this).parent().find('.slideshow__block'),
slideIn = $(this).parent().find('.slideshow__slidein'),
tl = new TimelineMax({
onComplete: tlComplete
}),
tl2 = new TimelineMax();
tl.set(circle, {
x: 15,
y: 15,
scale: 0
})
.set(slideIn, {
right: -350,
opacity: 1
}, 0)
.set(block, {
right: 270,
opacity: 0
}, 0)
.set($nextButton, {
zIndex: 1
}, 0)
.to(circle, 0.5, {
scale: 1,
transformOrigin: "50%, 50%",
opacity: 1
}, 0)
.to(circle, 0.3, {
opacity: 0
})
.to(line, 0.3, {
scale: 0,
transformOrigin: "50%, 50%"
}, 0)
.set(circle, {
scale: 0,
opacity: 0
});
function tlComplete() {
tl2.to(slideIn, 0.5, {
right: 0
})
.to(block, 0.5, {
right: 350,
opacity: 1
}, 0)
};
function getLineback() {
TweenMax.to(line, 0.3, {
scale: 1,
opacity: 1,
delay: 0.5
});
};
closeBlock.click(function() {
tl2.reverse();
});
closeBlock.click(getLineback);
$prevButton.click(function() {
tl2.reverse();
});
$prevButton.click(getLineback);
});
$prevButton.click(function() {
var circle = $(this).find('.circle'),
line = $(this).find('.line'),
block = $(this).parent().find('.slideshow__block'),
slideIn = $(this).parent().find('.slideshow__slidein'),
tl = new TimelineMax({
onComplete: tlComplete
}),
tl2 = new TimelineMax();
tl.set(circle, {
x: 15,
y: 15,
scale: 0
})
.set(slideIn, {
left: -350,
opacity: 1
}, 0)
.set(block, {
left: 270,
opacity: 0
}, 0)
.set($prevButton, {
zIndex: 1
}, 0)
.to(circle, 0.5, {
scale: 1,
transformOrigin: "50%, 50%",
opacity: 1
}, 0)
.to(circle, 0.3, {
opacity: 0
})
.to(line, 0.3, {
scale: 0,
transformOrigin: "50%, 50%"
}, 0)
.set(circle, {
scale: 0,
opacity: 0
});
function tlComplete() {
tl2.to(slideIn, 0.3, {
left: 0
})
.to(block, 0.3, {
left: 350,
opacity: 1
}, 0);
};
function getLineback() {
TweenMax.to(line, 0.3, {
scale: 1,
opacity: 1,
delay: 0.5
});
};
closeBlock.click(function() {
tl2.reverse();
})
closeBlock.click(getLineback);
$nextButton.click(function() {
tl2.reverse();
});
$nextButton.click(getLineback);
});
slideNext.click(function() {
clickCount++;
clickCountImg++;
var clickCountImgPrev = clickCountImg - 2;
var firstImage = $('.slideshow__container li img:eq(0)'),
imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'),
image = $('.slideshow__container li img:eq(' + clickCountImg + ')');
if (clickCount > 3) {
clickCount = 0;
}
if (clickCountImg > 3) {
clickCountImg = 0;
firstImage.clone().appendTo(slideNext);
}
TweenMax.to($slider, 0.5, {
x: -clickCount * imgWidth
})
slideNext.children("img").remove();
slideBack.children("img").remove();
image.clone().appendTo(slideNext);
imagePrev.clone().appendTo(slideBack);
console.log(image);
if (clickCountImg == 0) {
firstImage.clone().appendTo(slideNext);
}
});
slideBack.click(function() {
clickCount--;
clickCountImg--;
var clickCountImgPrev = clickCountImg - 2,
firstImage = $('.slideshow__container li img:eq(0)'),
imagePrev = $('.slideshow__container li img:eq(' + clickCountImgPrev + ')'),
image = $('.slideshow__container li img:eq(' + clickCountImg + ')');
if (clickCount < 0) {
clickCount = 3;
}
if (clickCountImg < 0) {
clickCountImg = 3;
}
TweenMax.to($slider, 0.5, {
x: -clickCount * imgWidth
});
slideNext.children("img").remove();
slideBack.children("img").remove();
imagePrev.clone().appendTo(slideBack);
image.clone().appendTo(slideNext);
});
});
</script>
* {
box-sizing: border-box;
}
body {
margin: 0;
width: 100%;
height: 100%;
background-color: #fff;
color: #fff;
font-family: "Perpetua", serif;
}
.slideshow {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slideshow__contentWrap {
width: 500px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 2;
text-align: center;
}
.slideshow__title {
font-size: 4em;
margin: 0;
font-weight: 100;
}
.slideshow__text {
font-size: 1em;
line-height: 1.5;
font-weight: 100;
font-family: "Century Gothic", sans-serif;
}
.slideshow__container {
display: block;
list-style: none;
position: relative;
white-space: nowrap;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
font-size: 0;
}
.slideshow__item {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
}
.slideshow__image {
display: block;
position: relative;
height: auto;
width: 100%;
background-size: contain;
}
.slideshow__slidein {
height: 100px;
width: 350px;
display: block;
position: absolute;
background-color: #000;
top: 50%;
transform: translateY(-50%);
margin: 0;
overflow: hidden;
}
.slideshow__slidein img {
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.slideshow .overlay {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
background-color: #000;
opacity: 0.5;
}
.slideshow__forward .slideshow__slidein {
right: -350px;
z-index: 2;
}
.slideshow__forward .slideshow__slidein .slideTitle {
font-size: 1.5em;
color: #fff;
font-family: "Century Gothic", sans-serif;
font-weight: 100;
margin: 0;
padding-left: 1em;
position: relative;
top: 50%;
transform: translateY(-50%);
z-index: 11;
margin-right: 300px;
text-align: right;
}
.slideshow__forward .slideshow__block {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 80px;
right: 270px;
opacity: 0;
background-color: #fff;
z-index: 2;
}
.slideshow__back .slideshow__slidein {
left: -350px;
z-index: 2;
}
.slideshow__back .slideshow__slidein .slideTitle {
font-size: 1.5em;
color: #fff;
font-family: "Century Gothic", sans-serif;
font-weight: 100;
margin: 0;
padding-right: 1em;
float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
z-index: 11;
margin-left: 300px;
text-align: right;
}
.slideshow__back .slideshow__block {
position: absolute;
display: block;
top: 50%;
transform: translateY(-50%);
height: 100px;
width: 80px;
left: 270px;
opacity: 0;
background-color: #fff;
z-index: 2;
}
.slideshow .close {
width: 25px;
height: 25px;
position: relative;
display: block;
opacity: 0;
transition: opacity .25s ease-in-out;
top: 50%;
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
}
.slideshow .slideshow__block:hover .close {
opacity: 1;
}
.slideshow__prev, .slideshow__next {
width: 3em;
z-index: 1;
}
.slideshow__prev svg, .slideshow__next svg {
display: block;
width: 100%;
height: 100%;
}
.slideshow__prev {
position: absolute;
left: 5em;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 1;
}
.slideshow__prev .circle {
opacity: 0;
}
.slideshow__next {
position: absolute;
right: 5em;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
z-index: 1;
}
.slideshow__next .circle {
opacity: 0;
}
