<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 ---------->
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lilita+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<div id="wrapper">
<div class="title">
<h1>World of Animals</h1>
<h2>Custom Slider by <a href="http://andrecortellini.com" target="_blank">André Cortellini</a></h2>
</div>
<div id="slider-wrap">
<ul id="slider">
<li class="active">
<div class="img">
<img src="http://lorempixel.com/320/160/animals/8">
</div>
<div class="content">
<h2>World of dogs</h2>
<div class="rating">
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<span class="review-count">1,499 reviews</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p>
<div class="btn">Play!</div>
</div>
</li>
<li>
<div class="img">
<img src="http://lorempixel.com/320/160/animals/10">
</div>
<div class="content">
<h2>A horse whinnies</h2>
<div class="rating">
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="review-count">1,102 reviews</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p>
<div class="btn">Rate!</div>
</div>
</li>
<li>
<div class="img">
<img src="http://lorempixel.com/320/160/animals/3">
</div>
<div class="content">
<h2>A tiger's day</h2>
<div class="rating">
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<span class="review-count">3,581 reviews</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p>
<div class="btn">Download!</div>
</div>
</li>
<li>
<div class="img">
<img src="http://lorempixel.com/320/160/animals/4">
</div>
<div class="content">
<h2>Necky giraffe attacks</h2>
<div class="rating">
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="review-count">722 reviews</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p>
<div class="btn">Get!</div>
</div>
</li>
<li>
<div class="img">
<img src="http://lorempixel.com/320/160/animals/7">
</div>
<div class="content">
<h2>Cat rules</h2>
<div class="rating">
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="fa fa-star rated"></span>
<span class="review-count">1,156 reviews</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta mi non accumsan facilisis. Lorem ipsum dolor sit amet.</p>
<div class="btn">Buy!</div>
</div>
</li>
</ul>
<!--controls-->
<div class="btns" id="next"><i class="fa fa-angle-right"></i></div>
<div class="btns" id="previous"><i class="fa fa-angle-left"></i></div>
<!--controls-->
</div>
</div>
<script>
$(document).ready(function(){
var pos = 0;
var totalSlides = $('#slider-wrap ul li').length;
var sliderWidth = $('#slider-wrap').width();
/*****************
BUILD THE SLIDER
****************/
$('#slider-wrap ul').width(sliderWidth*totalSlides);
/*NEXT SLIDE*/
$('#next').click(function(){
var p = 90;
pos++;
$('.btns#previous').fadeIn(100);
if(pos==totalSlides){
pos = 0;
p = 0;
$('.btns#previous').fadeOut(100);
}
if(pos==totalSlides-1){
p = 180;
$('.btns#next').fadeOut(100);
}else{
$('.btns#next').fadeIn(100);
}
$('#slider-wrap ul#slider').animate({
left: -(330*pos-p) }, {
duration: 800,
easing: 'easeOutBounce'
});
newpos = pos+1;
$('#slider-wrap ul li').removeClass('active');
$('#slider-wrap ul li:nth-child('+newpos+')').addClass('active');
});
/*PREVIOUS SLIDE*/
$('#previous').click(function(){
var p = 90;
pos--;
if(pos==-1){
pos = totalSlides-1;
p = 180;
}
if(pos==0){
p = 0;
$('.btns#previous').fadeOut(100);
}
$('#slider-wrap ul#slider').animate({
left: -(330*pos-p) }, {
duration: 800,
easing: 'easeOutBounce'
});
$('.btns#next').fadeIn(100);
newpos = pos+1;
$('#slider-wrap ul li').removeClass('active');
$('#slider-wrap ul li:nth-child('+newpos+')').addClass('active');
});
/*AUTO SLIDE*/
var autoSlider = setInterval(function() {
$('.btns#next').trigger('click');
}, 3000);
$('#slider-wrap').hover(
function(){
clearInterval(autoSlider);
},
function(){
autoSlider = setInterval(function() {
$('.btns#next').trigger('click');
}, 3000);
}
);
});//DOCUMENT READY
</script>
/*GLOBALS*/
*{margin:0; padding:0; list-style:none;}
a{
text-decoration:none;
color:#1783bb;
}
a:hover{
color:#116d9c;
}
body, hmtl{
background: #eaeaea;
font-family: 'Lilita One', cursive;
}
#wrapper{
width:100%;
max-width:520px;
margin:100px auto;
}
/*TITLE*/
.title{
width:560px;
background:#fff;
margin-left:-20px;
position:relative;
margin-bottom:20px;
text-align:center;
padding:10px 0;
border-radius:2px;
}
.title:before, .title:after{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 20%;
background: #ccc;
-webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0 15px 10px rgba(0,0,0,0.2);
box-shadow: 0 15px 10px rgba(0,0,0,0.2);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.title:after{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.title h1{
color:#444;
}
.title h2{
font-family: 'Questrial', sans-serif;
font-size:16px;
color:#999;
margin-top:6px;
}
/*SLIDER*/
#slider-wrap{
width:100%;
height:350px;
overflow:hidden;
background:#ccc;
position:relative;
}
ul#slider{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
ul#slider li{
width:320px;
height:330px;
margin-top:10px;
margin-left:10px;
border-radius:2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float:left;
background:#fff;
box-shadow:rgba(0,0,0,0.3) 0px 0px 5px;
opacity:0.5;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
padding:10px;
}
ul#slider li.active{
opacity:1;
}
ul#slider li:first-child{
margin-left:10px;
}
.btns{
position:absolute;
top:50%;
width:10px;
height:50px;
margin-top:-25px;
background:blue;
color:#666;
line-height:50px;
padding: 0 10px;
text-align:center;
background:#fff;
box-shadow:rgba(0,0,0,0.3) 0px 0px 5px;
cursor:pointer;
font-size:21px;
}
.btns#next{
right:0;
border-radius:30px 0 0 30px;
padding-right: 5px;
}
.btns#previous{
left:0;
border-radius:0 30px 30px 0;
padding-left: 5px;
display:none;
}
.btns:active{
color:#1783bb;
box-shadow:rgba(0,0,0,0.3) 0px 0px 8px inset;
}
/*Content*/
.img{
height:145px;
overflow:hidden;
margin-bottom:10px;
}
.img img{
width:100%;
}
.content h2{
font-size:21px;
margin-bottom:3px;
color:#444;
}
.content .rating{
color:#ccc;
}
.content .rating .rated{
color:#1783bb;
}
.content .review-count{
font-family: 'Questrial', sans-serif;
font-size:11px;
padding-left:6px;
color:#999;
}
.content p{
font-family: 'Questrial', sans-serif;
color:#666;
font-size:14px;
margin:10px 0;
line-height:1.3;
}
.content .btn{
text-align:center;
color:#fff;
padding:8px 15px;
background: #1783bb;
text-transform:uppercase;
cursor:pointer;
}
.content .btn:hover{
background:#116d9c;
}
