<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 ---------->
<section id="slider-header" class="slider-header">
<nav class="thumb-nav">
<a href="#"><img src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/thumbs/thumb1.png"> <span>1</span></a>
<a href="#"><img src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/thumbs/thumb2.png"> <span>2</span></a>
<a href="#"><img src="https://tympanus.net/Tutorials/SlidingHeaderLayout/img/thumbs/thumb3.png"> <span>3</span></a>
</nav>
<ul class="container-slider">
<li style="background: url('https://tympanus.net/Tutorials/SlidingHeaderLayout/img/header01.jpg') no-repeat center center; bacground-size: cover; -webkit-background-size: cover">
</li>
<li style="background: url('https://tympanus.net/Tutorials/SlidingHeaderLayout/img/header02.jpg') no-repeat center center; bacground-size: cover; -webkit-background-size: cover">
</li>
<li style="background: url('https://tympanus.net/Tutorials/SlidingHeaderLayout/img/header03.jpg') no-repeat center center; bacground-size: cover; -webkit-background-size: cover">
</li>
</ul>
</section>
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,400italic,300italic,300,600,600italic);
*{
margin: 0;
padding: 0;
font-family: 'Josefin Sans', sans-serif;
}
@keyframes curentRight{
from{
transform: translateX(100%) scale(.9) rotateZ(20deg);
-webkit-transform: translateX(100%) scale(.9) rotateZ(20deg);
opacity: .5; }
to{
transform: translateX(0) scale(1) rotateZ(0deg);
-webkit-transform: translateX(0) scale(1) rotateZ(0deg);
opacity: 1; }
}
@keyframes curentLeft{
from{
transform: translateX(-100%) scale(.9) rotateZ(-20deg);
-webkit-transform: translateX(-100%) scale(.9) rotateZ(-20deg);
opacity: .5; }
to{
transform: translateX(0) scale(1) rotateZ(0deg);
-webkit-transform: translateX(0) scale(1) rotateZ(0deg);
opacity: 1; }
}
@-webkit-keyframes curentRight{
from{
transform: translateX(100%) scale(.9) rotateZ(20deg);
-webkit-transform: translateX(100%) scale(.9) rotateZ(20deg);
opacity: .5; }
to{
transform: translateX(0) scale(1) rotateZ(0deg);
-webkit-transform: translateX(0) scale(1) rotateZ(0deg);
opacity: 1; }
}
@-webkit-keyframes curentLeft{
from{
transform: translateX(-100%) scale(.9) rotateZ(-20deg);
-webkit-transform: translateX(-100%) scale(.9) rotateZ(-20deg);
opacity: .5; }
to{
transform: translateX(0) scale(1) rotateZ(0deg);
-webkit-transform: translateX(0) scale(1) rotateZ(0deg);
opacity: 1; }
}
.content-item-current-right{
animation: curentRight .7s;
-webkit-animation: curentRight .7s;
left: 0; top: 0;
}
.content-item-current-left{
animation: curentLeft .7s;
-webkit-animation: curentLeft .7s;
left: 0; top: 0;
}
/***************************************************/
@keyframes outRight{
from{ transform: translateX(0) scale(1) rotateZ(0deg); opacity: 1; }
to{ transform: translateX(-100%) scale(.9) rotateZ(-20deg); opacity: .5; }
}
@keyframes outLeft{
from{ transform: translateX(0) scale(1) rotateZ(0deg); opacity: 1; }
to{ transform: translateX(100%) scale(.9) rotateZ(20deg); opacity: .5; }
}
@-webkit-keyframes outRight{
from{ transform: translateX(0) scale(1) rotateZ(0deg); opacity: 1; }
to{ transform: translateX(-100%) scale(.9) rotateZ(-20deg); opacity: .5; }
}
@-webkit-keyframes outLeft{
from{ transform: translateX(0) scale(1) rotateZ(0deg); opacity: 1; }
to{ transform: translateX(100%) scale(.9) rotateZ(20deg); opacity: .5; }
}
.content-item-out-right{
animation: outRight .7s ease;
-webkit-animation: outRight .7s ease;
left: 0; top: 0;
z-index: 1;
}
.content-item-out-left{
animation: outLeft .7s ease;
-webkit-animation: outLeft .7s ease;
left: 0; top: 0;
z-index: 1;
}
.slider-header{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1009;
background: #222;
}
.slider-header .thumb-nav{
position: absolute;
z-index: 10;
left: 30px;
top: 30px;
}
.slider-header .thumb-nav a{
display: inline-block;
width: 60px;
height: 60px;
border: solid 2px #FFF;
border-radius: 50%;
margin-right: 20px;
position: relative;
}
.slider-header .thumb-nav.disable-nav a{
pointer-events: none;
}
.slider-header .thumb-nav a img{
border-radius: 50%;
opacity: .1;
width: 100%;
height: 100%;
transition: .4s;
-webkit-transition: .4s;
}
.slider-header .thumb-nav a span{
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
-webkit-transform: translate3d(-50%, -50%, 0);
color: #FFF;
font-size: 24px;
}
.slider-header .thumb-nav a:hover img,
.slider-header .thumb-nav a.thumb-item-current img{
opacity: .9;
transform: scale(.8);
-webkit-transform: scale(.8);
}
.slider-header .container-slider{
position: absolute;
left: 0;
top: 0;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.slider-header .container-slider li{
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
z-index: -1;
outline: 1px solid transparent;
}
.slider-header .container-slider li.content-item-current{
opacity: 1;
z-index: 1
}
.slider-header .container-slider li:before{
content: "";
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(133,133,133,0.16) 48%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(48%,rgba(133,133,133,0.16)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(133,133,133,0.16) 48%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(133,133,133,0.16) 48%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(133,133,133,0.16) 48%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(133,133,133,0.16) 48%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#6b000000',GradientType=0 ); /* IE6-9 */
};
!(function($){
function sliderHeader(elem, opts){
this.thisEl = $(elem);
this.opts = $.extend({
active_item_default: 0,
time_animation: 700
}, opts);
this.init();
}
sliderHeader.prototype = {
init: function(){
this.thumbNav = this.thisEl.find('.thumb-nav');
this.containerSlider = this.thisEl.find('.container-slider');
if(this.thumbNav.length <= 0){ return; }
this.navController(); // controller Nav
},
navController: function(){
var sliderHeader = this;
this.thumbNav.find('a').on('click', function(e){
e.preventDefault();
var curent_active = sliderHeader.thumbNav.children('a').index(this),
new_item = sliderHeader.containerSlider.children('li').eq(curent_active),
old_item = sliderHeader.containerSlider.children('li').eq(sliderHeader.opts.active_item_default);
$(this).addClass('thumb-item-current').siblings().removeClass('thumb-item-current');
if(curent_active > sliderHeader.opts.active_item_default){
// Right
new_item.addClass('content-item-current content-item-current-right').siblings()
.removeClass('content-item-current')
sliderHeader.containerSlider.children('li').eq(curent_active).delay(sliderHeader.opts.time_animation).queue(function(){
$(this).removeClass('content-item-current-left')
.removeClass('content-item-current-right')
$(this).dequeue();
})
old_item.addClass('content-item-out-right')
.delay(sliderHeader.opts.time_animation).queue(function(){
$(this).removeClass('content-item-out-left')
.removeClass('content-item-out-right')
$(this).dequeue();
});
}else if(curent_active < sliderHeader.opts.active_item_default){
// Left
new_item.addClass('content-item-current content-item-current-left').siblings()
.removeClass('content-item-current')
new_item.delay(sliderHeader.opts.time_animation).queue(function(){
$(this).removeClass('content-item-current-left')
.removeClass('content-item-current-right')
$(this).dequeue();
})
old_item.addClass('content-item-out-left')
.delay(sliderHeader.opts.time_animation).queue(function(){
$(this).removeClass('content-item-out-left')
.removeClass('content-item-out-right');
$(this).dequeue();
});
}
sliderHeader.thumbNav.addClass('disable-nav').delay(500).queue(function(){
$(this).removeClass('disable-nav');
$(this).dequeue();
})
sliderHeader.opts.active_item_default = curent_active;
})
this.thumbNav.find('a').eq(this.opts.active_item_default).addClass('thumb-item-current');
this.containerSlider.find('li').eq(this.opts.active_item_default).addClass('content-item-current');
}
}
$.fn.sliderHeader = function(opts){
return $(this).each(function(){
new sliderHeader(this, opts);
})
}
$(function(){
$('#slider-header').sliderHeader();
})
})(jQuery)
