Gummy slider

Gummy slider.markdown

Gummy slider

A simple slider with fun animations

A Pen by Lewi Hussey on CodePen.

License.

index.html

<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>

script.js

$(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);
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

$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?