<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="slider" id="slider">
<ul class="slider__container">
<li class="slider__item is-active">
<figure class="slider__itemImage" style="background-image:url(https://c2.staticflickr.com/4/3514/3966939242_e29867a563_b.jpg)"></figure>
<div class="slider__itemText">
<h2 class="slider__itemTitle">Wayfarers post ironic synth</h2>
</div>
</li>
<li class="slider__item">
<figure class="slider__itemImage" style="background-image:url(https://c1.staticflickr.com/3/2538/3962063373_0e822b6884_b.jpg)"></figure>
<div class="slider__itemText">
<h2 class="slider__itemTitle">DIY shoreditch vegan swag</h2>
</div>
</li>
<li class="slider__item">
<figure class="slider__itemImage" style="background-image:url(https://c2.staticflickr.com/4/3432/3962896089_61f26f53d4_b.jpg)"></figure>
<div class="slider__itemText">
<h2 class="slider__itemTitle">Small batch bespoke thundercats</h2>
</div>
</li>
<li class="slider__item">
<figure class="slider__itemImage" style="background-image:url(https://c2.staticflickr.com/4/3437/3958614732_3a528b9648_b.jpg)"></figure>
<div class="slider__itemText">
<h2 class="slider__itemTitle">Flannel kale chips selvage kitsch</h2>
</div>
</li>
</ul>
<div class="slider__prev">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="-1 -1 12 32">
<path d="M 10,0 0,15 10,30" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="slider__next is-active">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="-1 -1 12 32">
<path d="M0 0l10 15L0 30" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<ul class="navThumbs">
<li class="navThumbs__item is-active" style="background-image:url(https://c2.staticflickr.com/4/3514/3966939242_e29867a563_b.jpg)"></li>
<li class="navThumbs__item" style="background-image:url(https://c1.staticflickr.com/3/2538/3962063373_0e822b6884_b.jpg)"></li>
<li class="navThumbs__item" style="background-image:url(https://c2.staticflickr.com/4/3432/3962896089_61f26f53d4_b.jpg)"></li>
<li class="navThumbs__item" style="background-image:url(https://c2.staticflickr.com/4/3437/3958614732_3a528b9648_b.jpg)"></li>
</ul>
</div>
<script>
/* Get index of element
http://stackoverflow.com/questions/27854824/vanilla-js-replacements-for-jquerys-index-and-eq*/
function index(element){
var sib = element.parentNode.childNodes;
var n = 0;
for (var i=0; i<sib.length; i++) {
if (sib[i]==element) return n;
if (sib[i].nodeType==1) n++;
}
return -1;
};
function getSiblings(elem) {
var siblings = [];
var sibling = elem.parentNode.firstChild;
for ( ; sibling; sibling = sibling.nextSibling ) {
if ( sibling.nodeType === 1 && sibling !== elem ) {
siblings.push( sibling );
}
}
return siblings;
};
var Slider = function() {
var
slider,
activeSlide,
slides,
slideWidth,
slideNavPrev,
slideNavNext,
slideNavThumbs;
var _init = function() {
slider = document.getElementById('slider');
slideContainer = document.getElementsByClassName('slider__container')[0];
activeSlide = document.getElementsByClassName('is-active')[0];
slides = document.getElementsByClassName('slider__item');
slides = Array.prototype.slice.call(slides, 0);
slideNavPrev = document.getElementsByClassName('slider__prev')[0];
slideNavNext = document.getElementsByClassName('slider__next')[0];
slideNavThumbs = document.getElementsByClassName('navThumbs__item');
slideNavThumbs = Array.prototype.slice.call(slideNavThumbs, 0);
slideWidth = parseInt(getComputedStyle(slideContainer).width);
_prepare();
_addEventHandlers();
_animateFirst();
}
var _addEventHandlers = function() {
slideNavNext.addEventListener('click', _goToNext, false);
slideNavPrev.addEventListener('click', _goToPrev, false);
// document.addEventListener("keydown", handleKeyboardNav, false);
slideNavThumbs.forEach(function(element, index) {
element.classList.remove('is-active');
element.addEventListener('click', _goToClicked, false);
});
}
var _prepare = function() {
slides.forEach(function(element,index) {
if(!element.classList.contains('is-active')) {
TweenLite.set(element, {autoAlpha: 0});
}
});
TweenLite.set(slideNavPrev, {autoAlpha: 0.2});
}
var _animateFirst = function() {
var slideInTitle = activeSlide.children[1].children[0];
slideInTitle = new SplitText(slideInTitle);
var _resetTitle = function() {
splitSlideInTitle.revert();
}
var tl = new TimelineLite({onComplete:_resetTitle});
tl
.staggerFromTo(slideInTitle.chars, 0.6, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut }, { opacity:1, scale:1, y:0, rotationX:0 }, 0.03, '-=0.3');
}
var _animateNext = function(slideOut, slideIn) {
var slideOutTitle = slideOut.children[1].children[0];
var slideOutSubtitle = slideOut.children[1].children[1];
var size = slides.length;
if(slideIn) {
var slideInTitle = slideIn.children[1].children[0];
var splitSlideInTitle = new SplitText(slideInTitle);
var slideInSubtitle = slideIn.children[1].children[1];
var _resetTitle = function() {
splitSlideInTitle.revert();
}
var tl = new TimelineLite({onComplete:_resetTitle});
tl
.set(slideIn, {x:'100%', autoAlpha:1, className:'+=is-active'})
.set(slideOut, {className: '-=is-active'})
.to(slideOutTitle, 0.3, {autoAlpha: 0, y:-50, ease:Power2.easeOut}, 0)
.to(slideOut, 0.9, {x: '-100%', ease:Power2.easeOut}, 0)
.to(slideIn, 0.9, {x: '-=100%', ease:Power2.easeOut}, 0)
.staggerFromTo(splitSlideInTitle.chars, 0.6, {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut }, { opacity:1, scale:1, y:0, rotationX:0 }, 0.03, '-=0.3');
if(index(slideIn) === size-1) {
TweenLite.to(slideNavNext, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone, className:'-=is-active'});
}
}
TweenLite.set(slideNavPrev, {autoAlpha: 1, className:'+=is-active'});
}
var _goToNext = function() {
var slideOut = document.getElementsByClassName('is-active')[0];
var slideIn = slideOut.nextElementSibling;
_animateNext(slideOut, slideIn)
}
var _animatePrev = function(slideOut, slideIn) {
var slideOutTitle = slideOut.children[1].children[0];
var tl = new TimelineLite();
if(slideIn) {
var slideInTitle = slideIn.children[1].children[0];
var _resetTitle = function() {
splitSlideInTitle.revert();
}
var splitSlideInTitle = new SplitText(slideInTitle);
var tl = new TimelineLite({onComplete: _resetTitle});
tl
.set(slideIn, {x:'-100%', autoAlpha:1, className:'+=is-active'})
.set(slideOut, {className: '-=is-active'})
.set(slideInTitle, {y:0, autoAlpha:1})
.to(slideOut, 0.9, {x: '100%', ease:Power2.easeOut}, 0)
.to(slideIn, 0.9, {x: '+=100%', ease:Power2.easeOut}, 0)
.staggerFromTo(splitSlideInTitle.chars, 0.8, {
opacity:0,
scale:0,
y:80,
rotationX:180,
transformOrigin:"0% 50% -50",
ease:Back.easeOut
},
{
opacity:1,
scale:1,
y:0,
rotationX:0
}, 0.03, '-=0.3')
if(index(slideIn) === 0){
TweenLite.to(slideNavPrev, 0.3, {autoAlpha: 0.2, ease:Linear.easeNone, className:'-=is-active'});
}
}
TweenLite.set(slideNavNext, {autoAlpha: 1, className:'+=is-active'});
}
var _goToPrev = function() {
var slideOut = document.getElementsByClassName('is-active')[0];
var slideIn = slideOut.previousElementSibling;
_animatePrev(slideOut, slideIn);
}
var _goToClicked = function() {
var clickedSlide = index(this);
var slideOut = document.getElementsByClassName('is-active')[0];
var slideIn = document.getElementsByClassName('slider__item')[clickedSlide];
var siblings = getSiblings(this);
siblings.forEach(function(element, index) {
element.classList.remove('is-active')
})
if(clickedSlide > index(slideOut)) {
this.classList.add('is-active')
_animateNext(slideOut, slideIn)
} else if(index(slideOut) > clickedSlide) {
this.classList.add('is-active')
_animatePrev(slideOut, slideIn)
}
}
var handleKeyboardNav = function(e) {
if (!e) e = window.event;
var kc = e.keyCode;
if (kc == 37) _goToPrev();
if (kc == 39) _goToNext();
}
return {
init: _init
}
}();
Slider.init();
</script>
* {
box-sizing: border-box;
}
body {
color: #333;
font-family: 'industry', sans-serif;
}
.slider {
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
}
.slider__container {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
.slider__item {
position: absolute;
width: 100%;
height: 100vh;
}
.slider__itemImage {
margin: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.slider__itemImage::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Rectangle 1: */
background-image: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
background-image: linear-gradient(-180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
}
.slider__itemText {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
font-size: 1rem;
color: #fff;
}
.slider__itemTitle {
text-transform: uppercase;
width: 100%;
padding: 0 2em;
font-size: 2em;
font-weight: 300;
text-align: center;
margin: .5rem 0 0;
font-weight: 300;
}
@media (min-width: 60em) {
.slider__itemTitle {
font-size: 4em;
width: 50%;
margin: 0 auto;
padding: 0;
}
}
.slider__itemSubtitle {
width: 40%;
font-size: 1.25em;
text-align: center;
line-height: 1.4;
display: none;
}
.slider__prev, .slider__next {
cursor: default;
z-index: 50;
width: 0.875em;
}
.slider__prev svg, .slider__next svg {
display: block;
width: 100%;
height: auto;
}
.slider__prev.is-active, .slider__next.is-active {
cursor: pointer;
}
.slider__prev {
position: absolute;
left: 1em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.slider__next {
position: absolute;
right: 1em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.navThumbs {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 500;
z-index: 100;
list-style: none;
margin: 0;
padding: 0;
}
.navThumbs__item {
width: 75px;
height: 40px;
background-size: cover;
background-position: center;
float: left;
margin: 0 0.5em;
cursor: pointer;
}
@media (min-width: 60em) {
.navThumbs__item {
width: 150px;
height: 100px;
}
}
.navThumbs__item.is-active {
opacity: .5;
cursor: default;
}
