A simple slider with fun animations
A Pen by Lewi Hussey on CodePen.
A simple slider with fun animations
A Pen by Lewi Hussey on CodePen.
<nav class="nav"> | |
<h1>Gummy slider</h1> | |
<p class="author">by Lewi Hussey</p> | |
</nav> | |
<div class="loading"> | |
Loading... | |
</div> | |
<div class="slider"> | |
<div class="slider-inner"> | |
<div class="slide active">1</div> | |
<div class="slide">2</div> | |
<div class="slide">3</div> | |
<div class="slide">4</div> | |
<div class="slide">5</div> | |
<div class="slide">6</div> | |
<div class="slide">7</div> | |
<div class="slide">8</div> | |
</div> | |
<nav class="slider-nav"> | |
<div class="active"></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
<div></div> | |
</nav> | |
</div> |
$(document).ready(function(){ | |
var slide = $(".slide"); | |
var viewWidth = $(window).width(); | |
var sliderInner = $(".slider-inner"); | |
var childrenNo = sliderInner.children().length; | |
sliderInner.width( viewWidth * childrenNo ); | |
$(window).resize(function(){ | |
viewWidth = $(window).width(); | |
}); | |
function setWidth(){ | |
slide.each(function(){ | |
$(this).width(viewWidth); | |
$(this).css("left", viewWidth * $(this).index()); | |
}); | |
} | |
function setActive(element){ | |
var clickedIndex = element.index(); | |
$(".slider-nav .active").removeClass("active"); | |
element.addClass("active"); | |
sliderInner.css("transform", "translateX(-" + clickedIndex * viewWidth + "px) translateZ(0)"); | |
$(".slider-inner .active").removeClass("active"); | |
$(".slider-inner .slide").eq(clickedIndex).addClass("active"); | |
} | |
setWidth(); | |
$(".slider-nav > div").on("click", function(){ | |
setActive($(this)); | |
}); | |
$(window).resize(function(){ | |
setWidth(); | |
}); | |
setTimeout(function(){ | |
$(".slider").fadeIn(500); | |
}, 2000); | |
}); | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$purple: #9b50ba; | |
$blue: #3498db; | |
$green: #2ecc71; | |
$yellow: #f1c40f; | |
*{ | |
box-sizing: border-box; | |
padding: 0; | |
margin: 0; | |
} | |
body{ | |
font-family: 'Roboto', sans-serif; | |
font-weight: 300; | |
} | |
.nav{ | |
position: fixed; | |
top: 0; | |
left: 0; | |
z-index: 9; | |
padding: 40px; | |
color: white; | |
h1{ | |
font-weight: 300; | |
font-size: 3rem; | |
} | |
.author{ | |
text-align: right; | |
} | |
} | |
.loading{ | |
background-color: $green; | |
width: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 600px; | |
line-height: 600px; | |
text-align: center; | |
color: white; | |
font-size: 2rem; | |
} | |
.slider{ | |
background-color: white; | |
position: relative; | |
width: 100%; | |
height: 600px; | |
overflow: hidden; | |
display: none; | |
} | |
.slider-inner{ | |
position: absolute; | |
left: 0; | |
top: 0; | |
height: 100%; | |
transition-timing-function: cubic-bezier(.22,1.61,.65,1); | |
transition-duration: 1s; | |
background-visibility: hidden; | |
transition-delay: .75s; | |
transform: translateZ(0); | |
} | |
.slide{ | |
position: absolute; | |
top: 0; | |
height: 100%; | |
background-color: $yellow; | |
background-visibility: hidden; | |
transition-timing-function: cubic-bezier(.25,.5,.25,1.25); | |
transform: translateZ(0) scale(.8, .8); | |
transition-duration: .5s; | |
text-align: center; | |
line-height: 600px; | |
font-size: 5rem; | |
color: white; | |
&.active{ | |
transform: scale(1, 1); | |
transition-delay: 2s; | |
} | |
&:nth-child(2n){ | |
background-color: $green; | |
} | |
&:nth-child(3n){ | |
background-color: $blue; | |
} | |
&:nth-child(4n){ | |
background-color: $purple; | |
} | |
} | |
.slider-nav{ | |
position: absolute; | |
bottom: 0; | |
left: 50%; | |
transform: translateX(-50%); | |
padding: 20px; | |
text-align: center; | |
>div{ | |
float: left; | |
width: 10px; | |
height: 10px; | |
border: 1px solid white; | |
z-index: 2; | |
display: inline-block; | |
margin: 0 10px; | |
cursor: pointer; | |
border-radius: 50%; | |
opacity: .5; | |
transition-duration: .25s; | |
background-color: transparent; | |
&:hover{ | |
opacity: 1; | |
} | |
&.active{ | |
background-color: white; | |
transform: scale(2); | |
opacity: 1; | |
} | |
} | |
} |
How to add autoplay function?