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

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

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