Slider

 <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
 
  <div class="con">
    <div class="con__slide  con__slide--1">
      <div class="con__slide-top con__slide--1-top active-slide-left-top">
        <div class='con__slide-top-inner con__slide--1-top-inner'>
          <div class='con__slide-top-inner-text con__slide--1-top-inner-text active-slide1-top-text'>
            <h1 class='con__slide-h con__slide--1-top-h'>some nice slider<br> here wow</h1>
          </div>
        </div>
      </div>
      <!--     slide--1 top end -->
      <div class="con__slide-bot  con__slide--1-bot active-slide-left-bot">
        <div class='con__slide-bot-text con__slide--1-bot-text active-slide1-bot-text'>
          <h1 class='con__slide-h con__slide--1-bot-h'>some nice slider<br> here wow</h1>
        </div>
      </div>
      <!--    slide--1 bot end -->
      <div class="con__slide-content con__slide--1-content active-slide-left-content">
        <svg class='con__slide--1-content-logo' version="1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewbox="0 0 600.000000 600.000000"><path d="M280.5 13.6c-19 1.9-25.9 2.9-38.5 5.4-73.3 14.6-139.2 59.2-181.4 122.8-24.5 36.8-40.2 79.8-45.8 125.2-1.6 13.5-1.6 51.5 0 65 5.6 45.4 21.3 88.4 45.8 125.2 47.1 70.9 121.3 116.5 206.4 127 5.8.7 20.4 1.3 32.5 1.3 12.1 0 26.7-.6 32.5-1.3 115.7-14.2 209.7-93.7 242.6-205.1 3.8-12.9 7.7-31.8 9.6-47.1 1.6-13.5 1.6-51.4 0-65-5.6-45.4-21.3-88.4-45.8-125.2-46.2-69.6-118.6-115-201.5-126.3-10.9-1.5-48.1-2.7-56.4-1.9zm39 47.4c63.6 5.9 120.7 35.1 161.2 82.4 33.4 39.1 52.5 84.4 57.3 136.1 4.2 45.6-6.5 95.6-29 135.7-29.5 52.4-75.8 91.3-131.5 110.5-72.2 24.8-149.5 14.4-213.1-28.8-30.3-20.6-55.7-48.5-74.4-81.7-22.5-40.1-33.2-90.1-29-135.7 6.2-67.1 37.6-125.6 90-167.5 46.5-37.4 109.5-56.4 168.5-51z"/><path d="M295 123.3c-1.9.7-40.7 26.1-86.2 56.5-64.5 43-83.1 55.9-84.5 58.4-1.7 3.1-1.8 7.5-1.8 61.3 0 53.9.1 58.2 1.8 61.3 1.4 2.5 20.1 15.5 85.5 59.1 49.2 32.8 85.1 56 87 56.4 1.9.4 4.9.1 7-.6 2-.7 40.9-26.1 86.4-56.5 64.5-43 83.1-55.9 84.5-58.4 1.7-3.1 1.8-7.5 1.8-61.3 0-53.9-.1-58.2-1.8-61.3-1.4-2.5-20.1-15.5-85.8-59.2-46.1-30.8-84.5-56-85.2-56-.6 0-2.1-.2-3.2-.5s-3.6.1-5.5.8zm-11 78.9l-.1 35.3-32.8 21.8-32.9 21.9-26.6-17.8-26.6-17.7 58.7-39.3c32.4-21.6 59.1-39.3 59.6-39.3.4-.1.7 15.8.7 35.1zm91 4.1l59 39.4-26.6 17.7-26.6 17.8-32.9-21.9-32.8-21.8-.1-35.3c0-19.3.2-35.2.5-35.2s27.1 17.7 59.5 39.3zm-49.2 74.8c14.1 9.4 26 17.5 26.5 17.8 1 1-52.1 36.4-53.6 35.8-3.2-1.4-52.1-34.8-51.8-35.5.5-.9 51.3-35 52.4-35.1.4-.1 12.3 7.6 26.5 17zm-135.2 18.5s-8.5 5.8-18.8 12.8L153 325.1V274l18.9 12.7c10.4 7.1 18.8 12.8 18.7 12.9zm255.4-.1V325l-18.8-12.7-18.8-12.8 18.5-12.7c10.3-6.9 18.7-12.7 18.9-12.7.1-.1.2 11.4.2 25.4zm-194.8 40.2l32.7 21.8.1 35.2c0 19.4-.2 35.3-.5 35.3s-27.1-17.7-59.5-39.3l-59-39.4 26.2-17.6c14.5-9.6 26.5-17.6 26.8-17.6.3-.1 15.2 9.7 33.2 21.6zm156.3-4l26.5 17.6-59 39.4c-32.4 21.6-59.2 39.3-59.5 39.3-.3 0-.5-15.9-.5-35.3l.1-35.2 32.7-21.7c18-12 32.8-21.8 33-21.8.1 0 12.1 7.9 26.7 17.7z"/></svg>
      </div>
      <!--     slide--1 content end -->
    </div>
    <!-- slide--1 end -->
  
    <!--   slide 2 -->
    <div class="con__slide con__slide--right con__slide--2">
      <div class="con__slide-top con__slide--right-top con__slide--2-top active-slide-right-top">
        <div class='con__slide-top-inner con__slide--right-top-inner con__slide--2-top-inner'>
          <div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--2-top-inner-text active-slide2-top-text'>
            <h1 class='con__slide-h con__slide--right-top-h con__slide--2-top-h'>another slide<br> such wow</h1>
          </div>
        </div>
      </div>
      <!--     slide--2 top end -->
      <div class="con__slide-bot con__slide--right-bot con__slide--2-bot active-slide-right-bot">
        <div class='con__slide-bot-text con__slide--right-bot-text con__slide--2-bot-text active-slide2-bot-text'>
          <h1 class='con__slide-h con__slide--right-bot-h con__slide--2-bot-h'>another slide<br> such wow</h1>
        </div>
      </div>
      <!--     slide--2 bot end -->
      <div class="con__slide-content con__slide--right-content con__slide--2-content active-slide-right-content">
        <img class='con__slide--right-content-image con__slide--2-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/doge_snow.png" alt="" />
      </div>
      <!--     slide--2 content end -->
    </div>
    <!-- slide--2 end -->
    
    <div class="con__slide con__slide--3">
      <div class="con__slide-top  con__slide--3-top active-slide-left-top">
        <div class='con__slide-top-inner con__slide--3-top-inner'>
          <div class='con__slide-top-inner-text con__slide--3-top-inner-text active-slide3-top-text'>
            <h1 class='con__slide-h con__slide--3-top-h'>half collored<br> text so nice</h1>
          </div>
        </div>
      </div>
      <!--    slide--3 top end -->
      <div class="con__slide-bot  con__slide--3-bot active-slide-left-bot">
        <div class='con__slide-bot-text con__slide--3-bot-text active-slide3-bot-text'>
          <h1 class='con__slide-h  con__slide--3-bot-h'>half collored<br> text so nice</h1>
        </div>
      </div>
      <!--    slide--3 bot end -->
      <div class="con__slide-content con__slide--3-content active-slide-left-content">
        <img class='con__slide--right-content-image con__slide--3-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/butterfly_(1).png" alt="" />
      </div>
      <!--     slide--3 content end -->
    </div>
    <!-- slide--3 end -->
    
    <div class="con__slide con__slide--right con__slide--4">
      <div class="con__slide-top con__slide--right-top con__slide--4-top active-slide-right-top">
        <div class='con__slide-top-inner con__slide--right-top-inner con__slide--4-top-inner'>
          <div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--4-top-inner-text active-slide4-top-text'>
            <h1 class='con__slide-h con__slide--right-top-h con__slide--4-top-h'><a class='con__slide--4-top-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1>
          </div>
        </div>
      </div>
      <!--     slide--4 top end -->
      <div class="con__slide-bot con__slide--right-bot con__slide--4-bot active-slide-right-bot">
        <div class='con__slide-bot-text con__slide--right-bot-text con__slide--4-bot-text active-slide4-bot-text'>
          <h1 class='con__slide-h con__slide--right-bot-h con__slide--4-bot-h'><a class='con__slide--4-bot-h-link' href="#" target="_blank">checkout my<br> other pens</a></h1>
        </div>
      </div>
      <!--     slide--4 bot end -->
      <div class="con__slide-content con__slide--right-content con__slide--4-content active-slide-right-content">
        <a href="#" target="_blank"><img class='con__slide--right-content-image con__slide--4-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/twi_(1).png" alt="" /></a> 
      </div>
      <!--     slide--4 content end -->
    </div>
    <!-- slide--4 end -->
    
    <div class="con__nav">
      <div data-target='up' class='con__nav-scroll con__nav-scroll--goup'></div>
      <div data-target='down' class='con__nav-scroll con__nav-scroll--godown'></div>
      <ul class='con__nav-list'>
        <li data-target="1" class='con__nav-item con__nav-item--1 nav-active'></li>
        <li data-target="2" class='con__nav-item con__nav-item--2'></li>
        <li data-target="3" class='con__nav-item con__nav-item--3'></li>
        <li data-target="4" class='con__nav-item con__nav-item--4'></li>
      </ul>
    </div>
  <!--   nav end -->
  </div>

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

html {
	box-sizing: border-box;
  }
  
  *,
  *:before,
  *:after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
  }
  
  body {
	font-family: "Roboto", sans-serif;
  }
  
  .con {
	position: relative;
	height: 100vh;
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/image.jpg") center center no-repeat;
	background-size: cover;
	overflow: hidden;
  }
  .con__slide {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
  }
  .con__slide-h {
	display: inline-block;
	text-align: center;
	text-transform: uppercase;
	font-size: 60px;
  }
  .con__slide-top, .con__slide-bot {
	position: absolute;
	background: rgba(0, 0, 0, 0.4);
  }
  .con__slide-top {
	top: -200px;
	left: -836px;
	height: 1235px;
	width: 550px;
	transform: rotate(25deg);
	transition: transform 650ms 1000ms;
  }
  .con__slide-top-inner {
	position: fixed;
	top: -59px;
	right: -175px;
	width: 100%;
	height: 500px;
	transform: rotate(20deg);
	overflow: hidden;
  }
  .con__slide-top-inner-text {
	position: absolute;
	right: 21px;
	top: 649px;
	transform: rotate(-45deg);
	transition: transform 1000ms;
  }
  .con__slide-bot {
	top: -50px;
	left: -884px;
	width: 700px;
	height: 1700px;
	transform: rotate(-45deg);
	overflow: hidden;
	transition: transform 1000ms 1100ms;
  }
  .con__slide-bot-text {
	position: absolute;
	right: -440px;
	top: 430px;
	transform: rotate(45deg);
	transition: transform 1000ms;
  }
  .con__slide--1-top-h {
	text-shadow: 0 0 1px #c43838;
	color: #c43838;
  }
  .con__slide--1-bot-h {
	text-shadow: 0 0 1px #fff;
	color: #fff;
  }
  .con__slide--1-content {
	position: absolute;
	right: 300px;
	top: 50%;
	transform: translateY(-55%);
	opacity: 0;
	transition: transform 1000ms, opacity 1000ms;
  }
  @media screen and (max-width: 1350px) {
	.con__slide--1-content {
	  right: 15%;
	}
  }
  @media screen and (max-width: 1160px) {
	.con__slide--1-content {
	  right: 5%;
	}
  }
  .con__slide--1-content-logo {
	fill: #e5e5e5;
  }
  @media screen and (max-height: 730px) {
	.con__slide--1-content-logo {
	  width: 300px;
	}
  }
  @media screen and (max-width: 1350px) {
	.con__slide--1-content-logo {
	  width: 300px;
	}
  }
  .con__slide--right-top {
	left: initial;
	right: -195px;
	right: -780px;
	transform: rotate(-25deg);
	transition: transform 650ms 1000ms;
  }
  .con__slide--right-top-inner {
	top: -31px;
	left: -249px;
	transform: rotate(-20deg);
	overflow: overflow;
  }
  .con__slide--right-top-inner-text {
	right: 10px;
	top: 620px;
	transform: rotate(45deg);
	-webkit-animation: initial;
			animation: initial;
	transition: transform 1000ms 0s;
  }
  .con__slide--right-top-h {
	width: 450px;
	text-shadow: 0 0 1px #2d48e2;
	color: #2d48e2;
  }
  .con__slide--right-bot {
	left: initial;
	right: -84px;
	right: -884px;
	transform: rotate(45deg);
	-webkit-animation: initial;
			animation: initial;
	overflow: hidden;
	transition: transform 1000ms 1100ms;
  }
  .con__slide--right-bot-text {
	left: -560px;
	top: 150px;
	transform: rotate(-45deg);
	-webkit-animation: initial;
			animation: initial;
	transition: transform 1000ms 0s;
  }
  .con__slide--right-bot-h {
	text-shadow: 0 0 1px #fff;
	color: #fff;
  }
  .con__slide--right-content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-95%, -45%);
	opacity: 0;
	transition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s;
	z-index: -9999;
  }
  @media screen and (max-height: 730px) {
	.con__slide--right-content-image {
	  width: 80%;
	}
  }
  @media screen and (max-width: 1366px) {
	.con__slide--right-content-image {
	  width: 80%;
	}
  }
  .con__slide--3-top-h {
	text-shadow: 0 0 1px #e0bb28;
	color: #e0bb28;
  }
  .con__slide--3-bot-h {
	text-shadow: 0 0 1px #fff;
	color: #fff;
  }
  .con__slide--3-content {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateY(-45%);
	opacity: 0;
	transition: transform 1400ms 0s, opacity 1400ms 0s, z-index 0s 2.2s;
  }
  @media screen and (max-width: 1366px) {
	.con__slide--3-content {
	  left: 60%;
	}
  }
  .con__slide--3-content-image {
	width: 500px;
  }
  @media screen and (max-height: 730px) {
	.con__slide--3-content-image {
	  width: 400px;
	}
  }
  @media screen and (max-width: 1366px) {
	.con__slide--3-content-image {
	  width: 400px;
	}
  }
  .con__slide--4-top-h-link {
	position: relative;
	text-decoration: none;
	text-shadow: 0 0 1px #3ee84f;
	color: #3ee84f;
  }
  .con__slide--4-bot-h-link {
	text-decoration: none;
	text-shadow: 0 0 1px #fff;
	color: #fff;
	z-index: 20;
  }
  .con__nav {
	position: fixed;
	bottom: 3%;
	left: 50%;
	transform: translateX(-50%);
  }
  .con__nav-list {
	list-style-type: none;
  }
  .con__nav-item {
	display: inline-block;
	position: relative;
	margin-left: 8px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid #e5e5e5;
	cursor: pointer;
  }
  .con__nav-item:after {
	content: " ";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0, 0);
	width: 75%;
	height: 75%;
	border-radius: 50%;
	background: #e5e5e5;
	transition: 300ms;
	opacity: 0;
	overflow: hidden;
  }
  .con__nav-item:hover:after {
	transform: translate(-50%, -50%) scale(1, 1);
	opacity: 1;
  }
  .con__nav-item--1 {
	margin-left: 0;
  }
  .con__nav-scroll {
	position: absolute;
	top: 1px;
	transform: rotate(-45deg);
	width: 17px;
	height: 17px;
	border: 2px solid #e5e5e5;
	border-right: transparent;
	border-bottom: transparent;
	cursor: pointer;
	transition: 300ms;
  }
  .con__nav-scroll:hover {
	transform: rotate(-45deg) scale(1.2, 1.2);
  }
  .con__nav-scroll--goup {
	left: -20px;
  }
  .con__nav-scroll--godown {
	transform: rotate(-225deg);
	right: -20px;
  }
  .con__nav-scroll--godown:hover {
	transform: rotate(-225deg) scale(1.2, 1.2);
  }
  
  .nav-active:after {
	transform: translate(-50%, -50%) scale(1, 1);
	opacity: 1;
  }
  
  .active .active-slide-left-top {
	transform: translate(640px, 0) rotate(25deg);
	transition: transform 650ms cubic-bezier(0, 0, 0.21, 1.02);
  }
  .active .active-slide-left-bot {
	transform: translateX(800px) rotate(-45deg);
	transition: transform 1000ms 350ms;
  }
  .active .active-slide-left-content {
	transform: translateY(-50%);
	opacity: 1;
	transition: transform 1000ms 1350ms, opacity 1000ms 1350ms;
  }
  .active .active-slide-right-top {
	transform: translateX(-585px) rotate(-25deg);
	transition: transform 650ms;
  }
  .active .active-slide-right-bot {
	transform: translateX(-800px) rotate(45deg);
	transition-delay: 350ms;
  }
  .active .active-slide-right-content {
	transform: translate(-95%, -50%);
	opacity: 1;
	z-index: 10;
	transition: transform 1400ms 1350ms, opacity 1400ms 1350ms, z-index 0s 1s;
  }
  .active .active-slide1-top-text {
	transform: translate(75px, -282px) rotate(-45deg);
	transition: transform 1000ms 1350ms;
  }
  .active .active-slide1-bot-text {
	transform: translate(-117px, 31px) rotate(45deg);
	transition: transform 1000ms 1350ms;
  }
  .active .active-slide2-top-text {
	transform: translate(-43px, -219px) rotate(45deg);
	transition-delay: 1350ms;
  }
  .active .active-slide2-bot-text {
	transform: translate(127px, -116px) rotate(-45deg);
	transition-delay: 1350ms;
  }
  .active .active-slide3-top-text {
	transform: translate(54px, -241px) rotate(-45deg);
	transition: transform 1000ms 1350ms;
  }
  .active .active-slide3-bot-text {
	transform: translate(-190px, 43px) rotate(45deg);
	transition: transform 1000ms 1350ms;
  }
  .active .active-slide4-top-text {
	transform: translate(-55px, -231px) rotate(45deg);
	transition: transform 1000ms 1350ms;
  }
  .active .active-slide4-bot-text {
	transform: translate(127px, -116px) rotate(-45deg);
	transition: transform 1000ms 1350ms;
  }

$(document).ready(function () {

    var $slides = $('.con__slide').length,
    topAnimSpd = 650,
    textAnimSpd = 1000,
    nextSlideSpd = topAnimSpd + textAnimSpd,
    animating = true,
    animTime = 4000,
    curSlide = 1,
    nextSlide,scrolledUp;
  
    setTimeout(function () {
      animating = false;
    }, 2300);
  
    function navigateUp() {
      if (curSlide > 1) {
        scrolledUp = true;
        pagination(curSlide);
        curSlide--;
      }
    }
  
    function navigateDown() {
      if (curSlide < $slides) {
        scrolledUp = false;
        pagination(curSlide);
        curSlide++;
        console.log(curSlide);
      }
    }
  
    $(window).on('load', function () {
      $('.con__slide--1').addClass('active');
    });
  
    function pagination(slide, target) {
      animating = true;
      // Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
      if (target === undefined) {
        nextSlide = scrolledUp ? slide - 1 : slide + 1;
      } else {
        nextSlide = target;
      }
      ////////// Slides //////////
      $('.con__slide--' + slide).removeClass('active');
  
      setTimeout(function () {
        $('.con__slide--' + nextSlide).addClass('active');
      }, nextSlideSpd);
  
      ////////// Nav //////////
      $('.con__nav-item--' + slide).removeClass('nav-active');
      $('.con__nav-item--' + nextSlide).addClass('nav-active');
  
      setTimeout(function () {
        animating = false;
      }, animTime);
    }
  
    // Mouse wheel trigger
    $(document).on('mousewheel DOMMouseScroll', function (e) {
      var delta = e.originalEvent.wheelDelta;
      if (animating) return;
      // Mouse Up
      if (delta > 0 || e.originalEvent.detail < 0) {
        navigateUp();
      } else {
        navigateDown();
      }
    });
  
    // Direct trigger
    $(document).on("click", ".con__nav-item:not(.nav-active)", function () {
      // Essential to convert target to a number with +, so curSlide would be a number
      var target = +$(this).attr('data-target');
      if (animating) return;
      pagination(curSlide, target);
      curSlide = target;
    });
  
    // Arrow trigger
    $(document).on('click', '.con__nav-scroll', function () {
      var target = $(this).attr('data-target');
      if (animating) return;
      if (target === 'up') {
        navigateUp();
      } else {
        navigateDown();
      }
    });
  
    // Key trigger
    $(document).on("keydown", function (e) {
      if (animating) return;
      if (e.which === 38) {
        navigateUp();
      } else if (e.which === 40) {
        navigateDown();
      }
    });
  
    var topLink = $(".con__slide--4-top-h-link"),
    botLink = $(".con__slide--4-bot-h-link");
    $(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
      mouseenter: function () {
        topLink.css('text-decoration', 'underline');
        botLink.css('text-decoration', 'underline');
      },
      mouseleave: function () {
        topLink.css('text-decoration', 'none');
        botLink.css('text-decoration', 'none');
      } });
  
  });