Diagonal Slider

Diagonal responsive slider

by Marc Cots Navarro

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<div class="diagonal"></div>

<div class="div-two">
  <section id="slider2">
    <div style="background:red"></div>
    <div style="background:black"></div>
    <div style="background:green"></div>
    <div style="background:orange"></div>
  </section>
</div>

<div class="div-one">
  <section id="slider">
    <div style="background:green"></div>
    <div style="background:blue"></div>
    <div style="background:red"></div>
    <div style="background:purple"></div>
  </section>
</div>

SCSS

.div-one, .div-two {
  position:absolute; 
  height: 100vh; width: 
  100vw; overflow: 
  hidden;
}

.div-one {
  -webkit-clip-path: polygon(90% 100%, 100% 100%, 100% 0, 0% 0%);
  clip-path: polygon(0% 0%, 100% 0%, 100vw 0);
  z-index: -1;
}

.div-two {
  -webkit-clip-path: polygon(0% 100%, 0% 0%, 90vw 100vh);
  clip-path: polygon(0% 100%, 0% 0%, 100vw 100vh);
  z-index: -1;
}


.slick-arrow { display:none !important; }

.slick-slide {
  height:100vh;
  background-size: cover !important;
}

.diagonal.animate {
  width: 100%;
  height: 100%;
  transition: all 2s ease;
}

.diagonal {
  position:absolute;
  width: 0%;
  height: 0%;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0' y1='0' x2='90%' y2='100%' stroke='pink' stroke-width='1'/></svg>") no-repeat;
}

JavaScript

$('.diagonal').toggleClass("animate");




function slider(){
  $("#slider").slick({
      autoplay: true,
      dots: false,
  });

  $("#slider2").slick({
      autoplay: true,
      dots: false,
      slidesToScroll: -1,
  });
}

setTimeout(slider, 2000);