Пишем код HTML:
Пишем стиль:
Пишем код js:
Смотрим полученный нами результат:
HTML:
<div class='slider center'>
<div class='counter'></div>
<div class='lang'></div>
<div class='love fa fa-heart-o'></div>
<div class='progress'></div>
<div class='slide'>
<div class='quote'>The difference between stupidy and genius is that genius has its limits.</div>
</div>
<div class='slide'>
<div class='quote'>Before God we are all equally wise - and equally foolish.</div>
</div>
<div class='slide'>
<div class='quote'>I never teach my pupils. I only attempt to provide the conditions in which they can learn.</div>
</div>
<div class='slide'>
<div class='quote'>Perfection of means and confusion of ends seems to characterize our age.</div>
</div>
<div class='slide'>
<div class='quote'>If you are out to describe the truth, leave elegance to the tailor.</div>
</div>
<div class='slide'>
<div class='quote'>It is a miracle that curiosity survives formal education.</div>
</div>
<div class='author'>
<img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/einstein_1.png'>
ALBERT EINSTIEN
</div>
</div>
CSS:
body {
background-color: #4c4f52;
font-family: 'Nunito', sans-serif;
font-size: 14pt;
}
.slider {
color: white;
width: 315px;
height: 375px;
display: block;
position: relative;
box-shadow: 0px 0px 6px 3px #303234, 0 30px 20px -15px #303234;
overflow: hidden;
}
.slider::before {
content: "";
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/81117/albert-einstein.png);
background-size: cover;
opacity: 0.1;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
.slider > .slide {
top: 65px;
position: absolute;
}
.slider > .counter {
display: block;
position: absolute;
top: 18px;
left: 18px;
z-index: 999;
}
.slider > .progress {
width: 0px;
height: 5px;
background-color: #2ec7bf;
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 999;
}
.slider > .progress::before {
content: '';
width: 315px;
height: 5px;
display: block;
position: absolute;
bottom: 0;
left: 0;
z-index: 998;
background-color: #2ec7bf;
opacity: 0.25;
}
.center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.quote {
padding: 0 20px;
font-size: 18pt;
text-align: center;
}
.quote::before {
content: '\f10d ';
font-family: FontAwesome;
color: #2ec7bf;
font-size: 18pt;
}
.quote::after {
content: ' \f10e';
font-family: FontAwesome;
color: #2ec7bf;
font-size: 18pt;
}
.author {
width: 315px;
position: absolute;
left: 0;
bottom: 23px;
right: 0;
margin: auto;
text-align: center;
}
.author img {
width: 62px;
height: 62px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid #2ec7bf;
position: absolute;
left: 0;
bottom: 25px;
right: 0;
margin: auto;
}
.love {
border-radius: 50%;
border: 2px solid white;
padding: 4px 4px 2px 4px;
right: 18px;
top: 16px;
position: absolute;
content: '\f08a';
font-family: FontAwesome;
display: block;
}
.love:hover:before {
color: #2ec7bf;
content: '\f004';
}
JavaScript:
var current = 0,
max = $(".slider > .slide").length;
$(".slider > .slide:gt(0)").hide();
$('.counter').text('1 of ' + max);
setInterval(function() {
$('.slider > .slide:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slider');
current++;
if (current >= max) current = 0;
$('.progress').width((current+1) * 315 / max);
$('.counter').text(current+1 + ' of ' + max);
}, 3000);