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 id="slider-left-wrap" class="slider">
<section class="slider-left">


<div style="background:blue"></div>
<div style="background:red"></div>
<div style="background:green"></div>
<div style="background:orange"></div>
</section>
</div>

<div id="slider-right-wrap" class="slider">
<section class="slider-right">
<div style="background:url(http://www.w3schools.com/css/img_fjords.jpg)"></div>
<div style="background:pink"></div>
<div style="background:brown"></div>
<div style="background:purple"></div>
</section>
</div>

SCSS

.slider {position:absolute; height: 100vh; width: 100vw; overflow: hidden;}
#slider-right-wrap {
  -webkit-clip-path: polygon(0% 0%, 100% 100%, 100% 0);
  clip-path: polygon(0% 0%, 100% 0%, 100vw 0);
  z-index: -1;
  background: url(http://www.w3schools.com/css/img_fjords.jpg);
  background-size: cover;
}


#slider-left-wrap {
  -webkit-clip-path: polygon(0% 100%, 0% 0%, 100vw 100vh);
  clip-path: polygon(0% 100%, 0% 0%, 100vw 100vh);
  z-index: -1;
}

.slider-right {
    width: auto;
    margin: 0;
    
}

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



.slick-slide {
    color: white;
    padding: 0;
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
    height:100vh;
     background-size: cover !important;
}

JavaScript

function slider(){
  $(".slider-right").slick({
      autoplay: true,
      dots: false,
      autoplaySpeed: 5000,
  });
}
setTimeout(slider, 2500);

$(".slider-left").slick({
    autoplay: true,
    dots: false,
    slidesToScroll: -1,
    autoplaySpeed: 5000,
});