24+ jQuery Slider Examples

This post contains a total of 24+ jQuery Slider Examples with Source Code. All these Sliders are made using jQuery and Styled using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

jQuery Slider Examples

1. By Jamie Coulter

Made by Jamie Coulter. jQuery Slider with Image burn effect, mix-blend-mode and background-position. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Oswald:300,400,500,600&display=swap");
body {
  font-family: "Oswald", sans-serif;
  background: black;
  margin: 0;
  padding: 0;
  height: 100vh;
  background-size: cover !important;
  overflow: hidden;
}
body .page_overlay {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/chernobylTexture.png");
  position: fixed;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: difference;
  width: 100%;
  opacity: 0.7;
  height: 100%;
}
body .page iframe {
  opacity: 0.2;
}
body .page_slider {
  position: absolute;
  width: 1100px;
  height: 300px;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  transform: translateY(calc(-50% - 40px)) translateX(-40px);
}
body .page_slider__slide {
  position: absolute;
  width: 100%;
}
body .page_slider__slide.active .slide {
  transform: scale(1);
  transition: transform 1s;
}
body .page_slider__slide .slide {
  position: absolute;
  width: 100%;
  transition: transform 0s;
  transform: scale(0);
}
body .page_slider__slide .slide.alt .slide_left {
  float: right;
}
body .page_slider__slide .slide.alt .slide_right {
  left: 0;
}
body .page_slider__slide .slide.alt .slide_right button {
  float: right;
  margin-right: 65px;
}
body .page_slider__slide .slide.alt .slide_right h2 {
  text-align: right;
  margin-right: 80px;
}
body .page_slider__slide .slide.alt .slide_right h2:before {
  left: auto;
  right: -32px;
}
body .page_slider__slide .slide_left {
  width: 70%;
  float: left;
  height: 300px;
}
body .page_slider__slide .slide_right {
  float: right;
  width: calc(50% - 56px);
  position: absolute;
  right: 0;
  height: 100%;
  text-transform: uppercase;
}
body .page_slider__slide .slide_right h2 {
  margin: 0;
  color: #f7912f;
  font-weight: 700;
  margin-left: 78px;
  font-size: 14px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.6s 0.2s;
}
body .page_slider__slide .slide_right h2::before {
  width: 20px;
  height: 1px;
  background: #f7912f;
  content: "";
  display: block;
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
}
body .page_slider__slide .slide_right p {
  color: white;
  font-weight: 800;
  font-size: 17px;
  position: relative;
  left: 0;
  opacity: 1;
  transition: all 0.6s 0.1s;
}
body .page_slider__slide .slide_right button {
  position: relative;
  margin-left: 78px;
  left: 0;
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 10px 40px;
  font-weight: 700;
  margin-top: 6px;
  cursor: pointer;
  background: transparent;
  color: #f7912f;
  border: 2px solid #f7912f;
  opacity: 1;
  transition: left 0.6s 0s, background 0.2s;
  outline: none;
}
body .page_slider__slide .slide_right button:hover {
  background: #5d1a1a;
}
body .page_slider__slide .slide_right__text {
  position: absolute;
  top: 50%;
  transform: translateY(calc(-50% + 50px));
}
body .page_slider__slide .slide_right__text.out h2 {
  left: 50px;
  opacity: 0;
}
body .page_slider__slide .slide_right__text.out p {
  left: 50px;
  opacity: 0;
}
body .page_slider__slide .slide_right__text.out button {
  left: 50px;
  opacity: 0;
}
body .page_header {
  padding: 50px;
}
body .page_header__logo {
  float: left;
}
body .page_header__menu {
  float: right;
}
body .page_sliderprogress {
  position: absolute;
  right: 70px;
  height: 205px;
  width: 0;
  top: 50%;
  transform: translateY(-50%);
}
body .page_sliderprogress__point {
  color: white;
  height: 40px;
}
body .page_sliderprogress__point.active .point {
  opacity: 1;
  border-color: #f7912f;
}
body .page_sliderprogress__point.active .point:after {
  display: block;
  width: 4px;
  height: 4px;
  content: "";
  background: #f7912f;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 50%;
  border-radius: 10px;
  transform: translateY(-50%);
}
body .page_sliderprogress__point.active .point:before {
  display: block;
  width: 20px;
  height: 1px;
  content: "";
  background: white;
  position: absolute;
  left: -30px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
body .page_sliderprogress__point.active .text {
  opacity: 1;
}
body .page_sliderprogress__point .point {
  width: 10px;
  height: 10px;
  border: 2px solid white;
  opacity: 0.13;
  border-radius: 100%;
  position: absolute;
}
body .page_sliderprogress__point .text {
  position: absolute;
  width: 140px;
  text-transform: uppercase;
  transform: translateY(-4px) translateX(calc(-100% - 20px));
  opacity: 0;
}
body .page_sliderprogress__point .text h3 {
  font-size: 14px;
  margin: 0;
}
body .page_sliderprogress__point .text h4 {
  font-size: 12px;
  margin: 0;
  color: #f7912f;
}

.image {
  height: 430px;
  overflow: hidden;
  position: relative;
  transform: scale(1);
  transition: all 4s;
}
.image.burn {
  transform: scale(1) translateX(-170px);
}
.image.burn .image_burn {
  -webkit-animation: burn 1.3s forwards steps(50, end);
          animation: burn 1.3s forwards steps(50, end);
}
.image.burn .image_burnline {
  -webkit-animation: burn 1.3s forwards steps(50, end);
          animation: burn 1.3s forwards steps(50, end);
}
.image.burn .image_ash, .image.burn .image_ashOuter {
  -webkit-animation: ash 2s infinite steps(66, end);
          animation: ash 2s infinite steps(66, end);
}
.image div {
  position: absolute;
  width: 770px;
  height: 430px;
  background-size: auto 100%;
  background-position: 0 0;
}
.image div img {
  width: 700px;
  transform: scale(0.9);
}
.image_burn {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/burnStrip.jpg");
}
.image_original {
  mix-blend-mode: darken;
}
.image_burnline {
  mix-blend-mode: lighten;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/burnlineStrip.jpg");
}
.image_ash {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ashInnerStrip.jpg");
  mix-blend-mode: screen;
}
.image_ashOuter {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/ashOuterStrip.jpg");
  mix-blend-mode: difference;
}

@-webkit-keyframes burn {
  0% {
    backgound-position: 0 0;
  }
  100% {
    background-position: -38145px 0;
  }
}

@keyframes burn {
  0% {
    backgound-position: 0 0;
  }
  100% {
    background-position: -38145px 0;
  }
}
@-webkit-keyframes ash {
  0% {
    backgound-position: 0 0;
  }
  100% {
    background-position: -50190px 0;
  }
}
@keyframes ash {
  0% {
    backgound-position: 0 0;
  }
  100% {
    background-position: -50190px 0;
  }
}
</style>
</head>
<body>
  <div class='page'>
  <div class='page_overlay'>
    <div style='position: fixed; z-index: -99; width: 2320px; height: 180%; left: -300px;top: -38%;'>
      <iframe frameborder="0" height="100%" width="100%" src="https://youtube.com/embed/G_Q6I7nj23A?start=300&autoplay=1&controls=0&showinfo=0&autohide=1&mute=1"></iframe>
    </div>
  </div>
  <div class='page_header'>
    <div class='page_header__logo trigger'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cehrnobylLogo.png'>
    </div>
    <div class='page_header__menu trigger'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/chernmenu.png'>
    </div>
  </div>
  <div class='page_slider'>
    <div class='page_slider__slide'>
      <div class='slide'>
        <div class='slide_left'>
          <div class='image'>
            <div class='image_burn'></div>
            <div class='image_original'>
              <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/chernimage2.png'>
            </div>
            <div class='image_burnline'></div>
            <div class='image_ash'></div>
            <div class='image_ashOuter'></div>
          </div>
        </div>
        <div class='slide_right'>
          <div class='slide_right__text'>
            <h2>Slide title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
            <button class='trigger'>next</button>
          </div>
        </div>
      </div>
    </div>
    <div class='page_slider__slide'>
      <div class='slide alt'>
        <div class='slide_left'>
          <div class='image'>
            <div class='image_burn'></div>
            <div class='image_original'>
              <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cimage11.png'>
            </div>
            <div class='image_burnline'></div>
            <div class='image_ash'></div>
            <div class='image_ashOuter'></div>
          </div>
        </div>
        <div class='slide_right'>
          <div class='slide_right__text'>
            <h2>Slide title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
            <button class='trigger'>next</button>
          </div>
        </div>
      </div>
    </div>
    <div class='page_slider__slide'>
      <div class='slide'>
        <div class='slide_left'>
          <div class='image'>
            <div class='image_burn'></div>
            <div class='image_original'>
              <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/chernImage1.png'>
            </div>
            <div class='image_burnline'></div>
            <div class='image_ash'></div>
            <div class='image_ashOuter'></div>
          </div>
        </div>
        <div class='slide_right'>
          <div class='slide_right__text'>
            <h2>Slide title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
            <button class='trigger'>next</button>
          </div>
        </div>
      </div>
    </div>
    <div class='page_slider__slide'>
      <div class='slide alt'>
        <div class='slide_left'>
          <div class='image'>
            <div class='image_burn'></div>
            <div class='image_original'>
              <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/chernimage2.png'>
            </div>
            <div class='image_burnline'></div>
            <div class='image_ash'></div>
            <div class='image_ashOuter'></div>
          </div>
        </div>
        <div class='slide_right'>
          <div class='slide_right__text'>
            <h2>Slide title</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
            <button class='trigger'>next</button>
          </div>
        </div>
      </div>
    </div>
    <div class='page_slider__slide'>
      <div class='slide'>
        <div class='slide_left'>
          <div class='image'>
            <div class='image_burn'></div>
            <div class='image_original'>
              <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cimage11.png'>
            </div>
            <div class='image_burnline'></div>
            <div class='image_ash'></div>
            <div class='image_ashOuter'></div>
          </div>
        </div>
        <div class='slide_right'>
          <div class='slide_right__text'>
            <h2>Next</h2>
            <p>In 1986 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
            <button class='trigger'>next</button>
          </div>
        </div>
      </div>
    </div>
    <div class='page_slider__slide'>
      <div class='slide alt'>
        <div class='slide_left'>
          <div class='image'>
            <div class='image_burn'></div>
            <div class='image_original'>
              <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/chernImage1.png'>
            </div>
            <div class='image_burnline'></div>
            <div class='image_ash'></div>
          </div>
        </div>
        <div class='slide_right'>
          <div class='slide_right__text'>
            <h2>The reactor explodes</h2>
            <p>In 1986 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure.</p>
            <button class='trigger'>next</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class='page_sliderprogress'>
    <div class='page_sliderprogress__point active'>
      <div class='point'></div>
      <div class='text'>
        <h3>September 3rd 1986</h3>
        <h4>1:30am</h4>
      </div>
    </div>
    <div class='page_sliderprogress__point'>
      <div class='point'></div>
      <div class='text'>
        <h3>September 3rd 1986</h3>
        <h4>1:30am</h4>
      </div>
    </div>
    <div class='page_sliderprogress__point'>
      <div class='point'></div>
      <div class='text'>
        <h3>September 3rd 1986</h3>
        <h4>1:30am</h4>
      </div>
    </div>
    <div class='page_sliderprogress__point'>
      <div class='point'></div>
      <div class='text'>
        <h3>September 3rd 1986</h3>
        <h4>1:30am</h4>
      </div>
    </div>
    <div class='page_sliderprogress__point'>
      <div class='point'></div>
      <div class='text'>
        <h3>September 3rd 1986</h3>
        <h4>1:30am</h4>
      </div>
    </div>
    <div class='page_sliderprogress__point'>
      <div class='point'></div>
      <div class='text'>
        <h3>September 3rd 1986</h3>
        <h4>1:30am</h4>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
      <script>
/* -------------------------------------------------

Dynamic cursor

--------------------------------------------------- */

const cursorSettings = {
  'class': 'dynamicCursor',
  'size': '18',
  'expandedSize': '40',
  'expandSpeed': 0.4,
  'background': 'rgba(161, 142, 218, 0.25)',
  'opacity': '1',
  'transitionTime': '1.4s',
  'transitionEase': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',
  'borderWidth': '0',
  'borderColor': 'black',
  'iconSize': '11px',
  'iconColor': 'white',
  'triggerElements': {
    'trigger': {
      'className': 'trigger',
      'icon': '<i class="fa fa-plus"></i>' },

    'trigger2': {
      'className': 'slider_inner',
      'icon': '<i class="fa fa-arrows-h"></i>' } } };





function dynamicCursor(options) {

  document.write('<link rel="stylesheet" href="https://maxcdn.icons8.com/fonts/line-awesome/1.1/css/line-awesome-font-awesome.min.css">');

  var hold;
  cursor = document.createElement('div');
  let cursorIcon = document.createElement('div');

  cursorIcon.classList.add('cursorIcon');
  cursorIcon.style.position = 'absolute';
  cursorIcon.style.fontFamily = 'Raleway';
  cursorIcon.style.textTransform = 'uppercase';
  cursorIcon.style.fontWeight = '800';
  cursorIcon.style.textAlign = 'center';
  cursorIcon.style.top = '50%';
  cursorIcon.style.width = '100%';
  cursorIcon.style.transform = 'translateY(-50%)';
  cursorIcon.style.color = options.iconColor;
  cursorIcon.style.fontSize = options.iconSize;
  cursorIcon.style.opacity = 0;
  cursorIcon.style.transition = `opacity ${options.expandSpeed}s`;

  cursor.classList.add(options.class);
  cursor.style.boxSizing = 'border-box';
  cursor.style.width = `${options.size}px`;
  cursor.style.height = `${options.size}px`;
  cursor.style.borderRadius = `${options.expandedSize}px`;
  cursor.style.opacity = 0;

  cursor.style.pointerEvents = 'none';
  cursor.style.zIndex = 999;
  cursor.style.transition = `transform ${options.transitionTime} ${options.transitionEase}, width ${options.expandSpeed}s .2s, height ${options.expandSpeed}s .2s, opacity 1s .2s`;
  cursor.style.border = `${options.borderWidth}px solid ${options.borderColor}`;
  cursor.style.position = 'fixed';
  cursor.style.background = options.background;

  cursor.appendChild(cursorIcon);
  document.body.appendChild(cursor);

  setTimeout(function () {
    cursor.style.opacity = options.opacity;
  }, 500);

  var idle;

  document.onmousemove = e => {
    console.log('test');
    x = e.pageX;
    y = e.pageY;

    $('.slide_left').css('transform', `translateX(-${x / 40}px) translateY(-${y / 40}px)`);
    $('.slide_right').css('transform', `translateX(-${x / 20}px) translateY(-${y / 20}px)`);

    cursor.style.opacity = options.opacity;
    clearInterval(idle);

    idle = setTimeout(function () {
      cursor.style.opacity = 0;
    }, 4000);

    cursor.style.top = '0';
    cursor.style.left = '0';
    cursor.style.transform = `translateX(calc(${x}px - 50%)) translateY(calc(${y}px - 50%))`;
  };

  for (i in options.triggerElements) {

    let trigger = $(`.${options.triggerElements[i].className}`);

    console.log(trigger);


    let icon = options.triggerElements[i].icon;

    if (!trigger) {
      console.warn('You dont have any triggers');
    } else {
      trigger.each(function (el) {

        console.log();
        trigger[el].style.cursor = 'default';
        trigger[el].addEventListener('mouseover', () => {
          console.log('over');
          cursor.style.width = `${options.expandedSize}px`;
          cursor.style.height = `${options.expandedSize}px`;
          cursorIcon.innerHTML = icon;
          cursorIcon.style.opacity = 1;


          console.log($(this));


        });

        trigger[el].addEventListener('mouseout', () => {
          cursor.style.width = `${options.size}px`;
          cursor.style.height = `${options.size}px`;
          cursorIcon.style.opacity = 0;
        });
      });

    }
  }
}

dynamicCursor(cursorSettings);


$(window).on('load', function () {
  setTimeout(function () {
    $('.page_slider__slide:nth-of-type(1)').addClass('active');
  }, 2000);
});

$('button').click(function () {
  let parent = $(this).parent();
  let slide = $(this).parent().parent().parent().parent(); //Should use closest();
  let image = $(this).parent().parent().prev().find('.image');

  $('.page_sliderprogress__point.active').removeClass('active').next().addClass('active');
  //image.remove();
  //image.addClass('burn')

  setTimeout(function () {
    image.addClass('burn');
  }, 100);

  setTimeout(function () {
    $('.active img').hide();

  }, 1380);
  setTimeout(function () {
    slide.removeClass('active');

  }, 2100);

  setTimeout(function () {
    slide.next().addClass('active');

  }, 2400);


  parent.addClass('out');

});
    </script>
</body>
</html>

2. By Ivan Grozdic

Made by Ivan Grozdic. Hover Slider with Dark / Light Mode. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');

body{
	width: 100%;
	height: 100vh;
	background: #1f2029;
	overflow: hidden;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
}
.cursor{
	background-color: #fff;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}

/* #Slider
================================================== */

.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
}

/* Case Study Showcase
================================================== */

.case-study-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: auto;
	margin: 0;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	list-style: none;
}
.case-study-wrapper .case-study-name {
	margin: 0 auto;
	text-align: center;
}
.case-study-wrapper .case-study-name a {
	position: relative;
	list-style: none;
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	padding: 0;
	margin-top: 10px;
	margin-bottom: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 8vh;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: 3px;
	color: #4a4a52;
	text-decoration: none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	text-decoration: none;
}	
.case-study-wrapper .case-study-name a:hover {
	text-decoration: none;
}	
.case-study-wrapper .case-study-name.active a {
	color: #fff;
}
.case-study-wrapper .case-study-name a:before {
	position: absolute;
	content: '';
	left: 50%;
	bottom: 0;
	height: 6px;
	width: 0;
	transform: translateX(-50%);
	background: linear-gradient(45deg, #f19872, #e86c9a);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear; 
}	
.case-study-wrapper .case-study-name:nth-child(2) a:before {
	background: linear-gradient(45deg, #0947db, #07d89d);
}
.case-study-wrapper .case-study-name:nth-child(3) a:before {
	background: linear-gradient(45deg, #ee2d29, #f8ae2c);
}
.case-study-wrapper .case-study-name:nth-child(4) a:before {
	background: linear-gradient(45deg, #3a3d98, #6f22b9);
}
.case-study-wrapper .case-study-name.active a:before {
	width: 100%;
}
.case-study-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0;
	z-index:2;
}	
.case-study-images li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-images li .img-hero-background{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	opacity: 0;
	-webkit-transform: translateY(60px);
	transform: translateY(60px);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .img-hero-background {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li .hero-number-back{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	list-style:none;
	opacity: 0;
	font-size: 20vw;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 4px rgba(0,0,0,.7);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number{
	position: absolute;
	bottom: 25px;
	left: 50%;
	width: 40px;
	margin-left: -70px;
	display: block;
	letter-spacing: 2px;
	text-align: center;
	list-style:none;
	opacity: 0;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number-fixed{
	position: absolute;
	bottom: 25px;
	left: 50%;
	margin-left: 30px;
	width: 40px;
	text-align: center;
	display: block;
	letter-spacing: 2px;
	list-style:none;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li .hero-number-fixed:before{
	position: absolute;
	content: '';
	top: 50%;
	left: -60px;
	width: 60px;
	height: 1px;
	z-index: 1;
	background-color: rgba(255,255,255,.4);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .hero-number {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li.show .hero-number-back {
	opacity: 1;
} 
.case-study-images li .img-hero-background span img{
	width: 100%;
	height: auto;
	display: block;
	transform: scale(0.6, 1.7);
	transform-origin: center top;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease; 
}
.case-study-images li.show .img-hero-background span img{
	transform: scale(1);
}
.case-study-images li:nth-child(1) .img-hero-background span{
	position: absolute;
	width: 15%;
	top: 12%;
	left: 25%;
	display: block;
}
.case-study-images li:nth-child(1) .img-hero-background span:nth-child(2){
	width: 18%;
	top: 22%;
	left: 55%;
}
.case-study-images li:nth-child(1) .img-hero-background span:nth-child(3){
	width: 13%;
	top: 55%;
	left: 75%;
}
.case-study-images li:nth-child(1) .img-hero-background span:nth-child(4){
	width: 11%;
	top: 44%;
	left: 15%;
}
.case-study-images li:nth-child(2) .img-hero-background span{
	position: absolute;
	width: 13%;
	top: 7%;
	left: 15%;
	display: block;
}
.case-study-images li:nth-child(2) .img-hero-background span:nth-child(2){
	width: 14%;
	top: 55%;
	left: 29%;
}
.case-study-images li:nth-child(2) .img-hero-background span:nth-child(3){
	width: 11%;
	top: 17%;
	left: 72%;
}
.case-study-images li:nth-child(2) .img-hero-background span:nth-child(4){
	width: 13%;
	top: 54%;
	left: 67%;
}
.case-study-images li:nth-child(3) .img-hero-background span{
	position: absolute;
	width: 11%;
	top: 9%;
	left: 18%;
	display: block;
}
.case-study-images li:nth-child(3) .img-hero-background span:nth-child(2){
	width: 11%;
	top: 55%;
	left: 29%;
}
.case-study-images li:nth-child(3) .img-hero-background span:nth-child(3){
	width: 12%;
	top: 11%;
	left: 62%;
}
.case-study-images li:nth-child(3) .img-hero-background span:nth-child(4){
	width: 9%;
	top: 54%;
	left: 75%;
}
.case-study-images li:nth-child(4) .img-hero-background span{
	position: absolute;
	width: 15%;
	top: 12%;
	left: 25%;
	display: block;
}
.case-study-images li:nth-child(4) .img-hero-background span:nth-child(2){
	width: 12%;
	top: 22%;
	left: 55%;
}
.case-study-images li:nth-child(4) .img-hero-background span:nth-child(3){
	width: 13%;
	top: 58%;
	left: 75%;
}
.case-study-images li:nth-child(4) .img-hero-background span:nth-child(4){
	width: 11%;
	top: 59%;
	left: 20%;
}

/* #Media
================================================== */

@media (max-width: 991px) { 
	.case-study-images li .hero-number-back{
		font-size: 26vw;
	} 
}

@media (max-width: 767px) {	
	.case-study-wrapper .case-study-name a {
		font-size: 26px;
		letter-spacing: 1px;
	}
	.case-study-images li .hero-number-back{
		font-size: 32vw;
	} 
}

@media (max-width: 580px) {	
	.case-study-images li:nth-child(1) .img-hero-background span,
	.case-study-images li:nth-child(2) .img-hero-background span,
	.case-study-images li:nth-child(3) .img-hero-background span,
	.case-study-images li:nth-child(4) .img-hero-background span{
		width: calc(100% - 40px);
		top: 50%;
		left: 20px;
		transform: translateY(-50%);
	}
	.case-study-images li:nth-child(1) .img-hero-background span:nth-child(2),
	.case-study-images li:nth-child(1) .img-hero-background span:nth-child(3),
	.case-study-images li:nth-child(1) .img-hero-background span:nth-child(4),
	.case-study-images li:nth-child(2) .img-hero-background span:nth-child(2),
	.case-study-images li:nth-child(2) .img-hero-background span:nth-child(3),
	.case-study-images li:nth-child(2) .img-hero-background span:nth-child(4),
	.case-study-images li:nth-child(3) .img-hero-background span:nth-child(2),
	.case-study-images li:nth-child(3) .img-hero-background span:nth-child(3),
	.case-study-images li:nth-child(3) .img-hero-background span:nth-child(4),
	.case-study-images li:nth-child(4) .img-hero-background span:nth-child(2),
	.case-study-images li:nth-child(4) .img-hero-background span:nth-child(3),
	.case-study-images li:nth-child(4) .img-hero-background span:nth-child(4){
		display: none;
	}
}
.switch-wrap {
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 1000;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
#switch,
#circle {
	cursor: pointer;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
#switch {
	width: 70px;
	height: 8px;
	margin: 0 auto;
	text-align: center;
	border: 2px solid #000;
	border-radius: 27px;
	background: #8167a9;
	position: relative;
	display: inline-block;
}
#circle {
	position: absolute;
	top: -11px;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #fff;
}
.switched {
	border-color: #8167a9 !important;
	background: #000 !important;
}
.switched #circle {
	left: 44px;
	background: #000;
}


body.light{
	background: #f2f5f5;
}
body.light .cursor{
	mix-blend-mode: normal;
}
body.light .cursor2{
	border: 2px solid #000;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
	mix-blend-mode: normal;
}
body.light .cursor2.hover{
	background: rgba(0,0,0,.15);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
	border-color: transparent;
	mix-blend-mode: normal;
}
body.light .case-study-images li .hero-number-back{
	-webkit-text-stroke: 4px #ccc;
} 
body.light .case-study-images li .hero-number{
	color: #212121;
} 
body.light .case-study-images li .hero-number-fixed{
	color: #212121;
}
body.light .case-study-images li .hero-number-fixed:before{
	background-color: rgba(0,0,0,.4);
}
body.light .case-study-wrapper .case-study-name a {
	color: #777777;
}	
body.light .case-study-wrapper .case-study-name.active a {
	color: #000;
}
/* #Link to page
================================================== */

.link-to-portfolio {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 100;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url('https://ivang-design.com/ig-logo.jpg');
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
}
</style>
</head>
<body>
  <div class="switch-wrap">
			<div id="switch" class="hover-target">
				<div id="circle"></div>
			</div>
		</div>
		
		<!-- Page cursor
		================================================== -->
		
        <div class='cursor' id="cursor"></div>
        <div class='cursor2' id="cursor2"></div>
        <div class='cursor3' id="cursor3"></div> 

    <div class="section">
			<ul class="case-study-wrapper">
				<li class="case-study-name">                            	
					<a href="#" class="hover-target">nature</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">travel</a>
				</li>
				<li class="case-study-name">                                        	
					<a href="#" class="hover-target">fashion</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">culture</a>
				</li>
			</ul>
			<ul class="case-study-images">
				<li>
					<div class="img-hero-background">
						<span>
							<img src="https://ivang-design.com/svg-load/slider/1.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/2.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/3.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/4.jpg" alt="">
						</span> 
					</div> 
					<div class="hero-number-back">01</div> 
					<div class="hero-number">01</div> 
					<div class="hero-number-fixed">04</div> 
				</li>
				<li>
					<div class="img-hero-background">
						<span>
							<img src="https://ivang-design.com/svg-load/slider/5.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/6.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/7.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/8.jpg" alt="">
						</span> 
					</div> 
					<div class="hero-number-back">02</div> 
					<div class="hero-number">02</div>  
				</li>
				<li>
					<div class="img-hero-background">
						<span>
							<img src="https://ivang-design.com/svg-load/slider/9.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/10.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/11.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/12.jpg" alt="">
						</span> 
					</div>
					<div class="hero-number-back">03</div>  
					<div class="hero-number">03</div> 
				</li>
				<li>
					<div class="img-hero-background">
						<span>
							<img src="https://ivang-design.com/svg-load/slider/13.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/14.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/15.jpg" alt="">
						</span> 
						<span>
							<img src="https://ivang-design.com/svg-load/slider/16.jpg" alt="">
						</span> 
					</div> 
					<div class="hero-number-back">04</div> 
					<div class="hero-number">04</div> 
				</li>
			</ul>	
		</div>

<!-- Link to page
	================================================== -->

  <a href="https://themeforest.net/user/ig_design/portfolio" class="link-to-portfolio hover-target" target="_blank"></a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

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

(function ($) {"use strict";

  //Page cursors

  document.getElementsByTagName("body")[0].addEventListener("mousemove", function (n) {
    t.style.left = n.clientX + "px",
    t.style.top = n.clientY + "px",
    e.style.left = n.clientX + "px",
    e.style.top = n.clientY + "px",
    i.style.left = n.clientX + "px",
    i.style.top = n.clientY + "px";
  });
  var t = document.getElementById("cursor"),
  e = document.getElementById("cursor2"),
  i = document.getElementById("cursor3");
  function n(t) {
    e.classList.add("hover"), i.classList.add("hover");
  }
  function s(t) {
    e.classList.remove("hover"), i.classList.remove("hover");
  }
  s();
  for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {if (window.CP.shouldStopExecution(0)) break;
    o(r[a]);
  }window.CP.exitedLoop(0);
  function o(t) {
    t.addEventListener("mouseover", n), t.addEventListener("mouseout", s);
  }

  $(document).ready(function () {

    /* Hero Case study images */

    $('.case-study-name:nth-child(1)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(1)').addClass("show");
      $('.case-study-name:nth-child(1)').addClass('active');
    });
    $('.case-study-name:nth-child(2)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(2)').addClass("show");
      $('.case-study-name:nth-child(2)').addClass('active');
    });
    $('.case-study-name:nth-child(3)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(3)').addClass("show");
      $('.case-study-name:nth-child(3)').addClass('active');
    });
    $('.case-study-name:nth-child(4)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(4)').addClass("show");
      $('.case-study-name:nth-child(4)').addClass('active');
    });
    $('.case-study-name:nth-child(1)').trigger('mouseenter');
  });


  //Switch dark/light

  $("#switch").on('click', function () {
    if ($("body").hasClass("light")) {
      $("body").removeClass("light");
      $("#switch").removeClass("switched");
    } else
    {
      $("body").addClass("light");
      $("#switch").addClass("switched");
    }
  });


})(jQuery);
    </script>
</body>
</html>

3. By Bilal.Rizwaan

Made by Bilal.Rizwaan. Stack Card Slider With jQuery And CSS3. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.dp-wrap {
  margin: 120px auto;
  position: relative;
  perspective: 1000px;
  height: 100%;
}

.dp-slider {
  height: 100%;
  width: 100%;
  position: absolute;
  transform-style: preserve-3d;
}

.dp-slider div {
  transform-style: preserve-3d;
}

.dp_item {
  display: block;
  position: absolute;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  transition: transform 1.2s;
}

.dp-img img {
  border-left: 1px solid #fff;
}

#dp-slider .dp_item:first-child {
  z-index: 10 !important;
  transform: rotateY(0deg) translateX(0px) !important;
}

.dp_item[data-position="2"] {
  z-index: 9;
  transform: rotateY(0deg) translateX(10%) scale(0.9);
}

.dp_item[data-position="3"] {
  z-index: 8;
  transform: rotateY(0deg) translateX(20%) scale(0.8);
}

.dp_item[data-position="4"] {
  z-index: 7;
  transform: rotateY(0deg) translateX(30%) scale(0.7);
}

#dp-next,
#dp-prev {
  position: absolute;
  top: 50%;
  right: 16%;
  height: 33px;
  width: 33px;
  z-index: 10;
  cursor: pointer;
}

#dp-prev {
  left: 15px;
  transform: rotate(180deg);
}

#dp-dots {
  position: absolute;
  bottom: 25px;
  z-index: 12;
  left: 38%;
  cursor: default;
}

#dp-dots li {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
}

#dp-dots li:hover {
  cursor: pointer;
  background: goldenrod;
  transition: background 0.3s;
}

#dp-dots li.active {
  background: goldenrod;
}

.dp_item {
  width: 85%;
}

.dp-content,
.dp-img {
  text-align: left;
}

.dp_item {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  border-top: none;
}

.dp-content {
  padding-left: 100px;
  padding-right: 0;
  display: inline-block;
  width: 100%;
}

.dp-content h2 {
  color: #41414b;
  font-family: Circular Std Bold;
  font-size: 48px;
  max-width: 460px;
  margin-top: 8px;
  margin-bottom: 0px;
}

.dp-content p {
  color: #74747f;
  max-width: 490px;
  margin-top: 15px;
  font-size: 24px;
}

.dp-content .site-btn {
  margin-top: 15px;
  font-size: 18px;
  padding: 19px 40px;
}

.dp-img:before {
  background: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 0.75),
    rgba(255, 255, 255, 0)
  );
  content: "";
  position: absolute;
  height: 100%;
  width: 25%;
  z-index: 1;
  top: 0;
  pointer-events: none;
  background: linear-gradient(
    -90deg,
    rgba(255, 255, 255, 0),
    rgb(255, 255, 255)
  );
}

.dp-img img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: right;
     object-position: right;
}

#dp-slider,
.dp-img img {
  height: 738px;
}

#dp-slider .dp_item:hover:not(:first-child) {
  cursor: pointer;
}

.site-btn {
  color: #fff;
  font-size: 18px;
  font-family: "Circular Std Medium";
  background: goldenrod;
  padding: 14px 33px;
  display: inline-block;
  border-radius: 50px;
  position: relative;
  top: -10px;
  text-decoration: none;
}

.site-btn:hover {
  text-decoration: none;
  color: #fff;
}
</style>
</head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<div id="slider">
  <div class="dp-wrap">
    <div id="dp-slider">

      <div class="dp_item" data-class="1" data-position="1">
        <div class="dp-content">

          <h2>Dirlis Ertugrul</h2>
          <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit..</p>
          <a href="#" class="site-btn">Read More…</a>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://i.postimg.cc/rpTXWBb0/MV5-BOTQ0-NDY0-Y2-Mt-MTdi-Yi00-Zjgz-LWJj-Nm-It-Nz-Yw-Y2-Nk-Zjll-Ym-I1-Xk-Ey-Xk-Fqc-Gde-QXVy-NDg4-Mjkz-NDk-V1.jpg" alt="investing">
        </div>
      </div>

      <div class="dp_item" data-class="2" data-position="2">
        <div class="dp-content">
          <h2>Dirlis Ertugrul</h2>
          <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit..</p>
          <a href="#" class="site-btn">Read More…</a>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://i.postimg.cc/pVsWvLS0/ffbd73fd0e5e40a8443e11c9d2b29d5d.jpg" alt="investing">
        </div>
      </div>

      <div class="dp_item" data-class="3" data-position="3">
        <div class="dp-content">

          <h2>Dirlis Ertugrul</h2>
          <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit..</p>
          <a href="#" class="site-btn">Read More…</a>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://i.postimg.cc/tgFRGt0P/MV5-BMGM2-Zm-E4-Yz-Mt-OTBm-NS00-Nm-E4-LWI4-NTUt-Mjg3-ZTJj-ZDYw-ZTc5-Xk-Ey-Xk-Fqc-Gde-QXVy-NDg4-Mjkz-NDk-V1.jpg" alt="investing">
        </div>
      </div>

      <div class="dp_item" data-class="4" data-position="4">
        <div class="dp-content">

          <h2>Dirlis Ertugrul</h2>
          <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit..</p>
          <a href="#" class="site-btn">Read More…</a>
        </div>
        <div class="dp-img">
          <img class="img-fluid" src="https://i.postimg.cc/wv6zKCQ8/MV5-BNj-I4-Yj-Jl-ZTct-Mj-U5-NS00-MGFh-LWFk-Zjgt-OTlj-N2-Y4-Nz-I1-Mj-A4-Xk-Ey-Xk-Fqc-Gde-QXVy-NDg4-Mjkz-NDk-V1.jpg" alt="investing">
        </div>
      </div>
    </div>

    <span id="dp-next">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
        <defs>
          <style>
            .cls-1 {
              fill: none;
              stroke: gold;
              stroke-miterlimit: 10;
              stroke-width: 7px;
            }
          </style>
        </defs>
        <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)" />
      </svg>
    </span>

    <span id="dp-prev">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 51.401 51.401">
        <defs>
          <style>
            .cls-1 {
              fill: none;
              stroke: gold;
              stroke-miterlimit: 10;
              stroke-width: 7px;
            }
          </style>
        </defs>
        <path id="Rectangle_4_Copy" data-name="Rectangle 4 Copy" class="cls-1" d="M32.246,0V33.178L0,31.953" transform="translate(0.094 25.276) rotate(-45)" />
      </svg>
    </span>

    <ul id="dp-dots">
      <li data-class="1" class="active"></li>
      <li data-class="2"></li>
      <li data-class="3"></li>
      <li data-class="4"></li>
    </ul>
  </div>
</div>
      <script>
$(document).ready(function () {
  function detect_active() {
    // get active
    var get_active = $("#dp-slider .dp_item:first-child").data("class");
    $("#dp-dots li").removeClass("active");
    $("#dp-dots li[data-class=" + get_active + "]").addClass("active");
  }
  $("#dp-next").click(function () {
    var total = $(".dp_item").length;
    $("#dp-slider .dp_item:first-child").hide().appendTo("#dp-slider").fadeIn();
    $.each($(".dp_item"), function (index, dp_item) {
      $(dp_item).attr("data-position", index + 1);
    });
    detect_active();
  });

  $("#dp-prev").click(function () {
    var total = $(".dp_item").length;
    $("#dp-slider .dp_item:last-child").hide().prependTo("#dp-slider").fadeIn();
    $.each($(".dp_item"), function (index, dp_item) {
      $(dp_item).attr("data-position", index + 1);
    });

    detect_active();
  });

  $("#dp-dots li").click(function () {
    $("#dp-dots li").removeClass("active");
    $(this).addClass("active");
    var get_slide = $(this).attr("data-class");
    console.log(get_slide);
    $("#dp-slider .dp_item[data-class=" + get_slide + "]").
    hide().
    prependTo("#dp-slider").
    fadeIn();
    $.each($(".dp_item"), function (index, dp_item) {
      $(dp_item).attr("data-position", index + 1);
    });
  });

  $("body").on("click", "#dp-slider .dp_item:not(:first-child)", function () {
    var get_slide = $(this).attr("data-class");
    console.log(get_slide);
    $("#dp-slider .dp_item[data-class=" + get_slide + "]").
    hide().
    prependTo("#dp-slider").
    fadeIn();
    $.each($(".dp_item"), function (index, dp_item) {
      $(dp_item).attr("data-position", index + 1);
    });

    detect_active();
  });
});
    </script>
</body>
</html>

4. By Valery Alikin

Made by Valery Alikin. Slider Animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
body {
  overflow-x: hidden;
  font-family: "Roboto Condensed", sans-serif;
  color: #fff;
  height: 880px;
  position: relative;
}

a {
  color: #fff;
}

.canvasWrap {
  position: relative;
  overflow: hidden;
}

.images {
  display: none;
}

.load {
  width: 0;
  height: 8px;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
}

.header {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 20;
  padding: 50px 5%;
}
.header p {
  font-size: 30px;
  font-weight: bold;
}
.header .menu {
  position: absolute;
  right: 5%;
  top: 46%;
  transform: translateY(-50%);
  z-index: 20;
  width: 35px;
  height: 35px;
}
.header .menu:before, .header .menu:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #fff;
}
.header .menu:before {
  top: 12px;
}
.header .menu:after {
  top: 21px;
}

.captions {
  position: absolute;
  bottom: 5%;
  left: 5%;
  z-index: 20;
  color: #fff;
  width: 100%;
  height: 200px;
  overflow: hidden;
}
.captions .count {
  font-size: 200px;
  font-weight: bold;
  margin: 0;
  float: left;
  margin-right: 35px;
  line-height: 1;
}
.captions .title {
  font-size: 70px;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: 1;
}
.captions .loc {
  color: #ccc;
  letter-spacing: 2px;
  font-size: 16px;
  line-height: 1;
}
.captions .buttonWrap {
  padding-top: 29px;
  overflow: hidden;
}
.captions .titleWrap {
  margin-top: 14px;
  overflow: hidden;
}
.captions .locWrap {
  overflow: hidden;
}

.caption {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.button {
  background: #fff;
  color: #333;
  display: inline-block;
  padding: 6px 29px;
  text-decoration: none;
}
.button:hover, .button:focus {
  text-decoration: none;
  color: #333;
}

.read {
  position: absolute;
  right: 5%;
  bottom: 7%;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  z-index: 30;
}
.read:before {
  content: "";
  right: -25px;
  position: absolute;
  left: -25px;
  bottom: -10px;
  height: 1px;
  background: #fff;
  transition: all 0.4s ease-in-out;
}
.read:hover, .read:focus {
  color: #fff;
  text-decoration: none;
}
.read:hover:before, .read:focus:before {
  left: -40px;
  right: -40px;
}
</style>
</head>
<body>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700" rel="stylesheet">

<div class="load"></div>

<header class="header">
    <p>ARCHY</p>
    <div class="menu"></div>
</header>

<div class="canvasWrap">
    <canvas id="canvas"></canvas>
</div>

<div class="images">
    <img width="200" id="image1" src="https://alikinvv.github.io/square-slider/build/img/img1.jpg" alt="">
    <img width="200" id="image2" class="active" src="https://alikinvv.github.io/square-slider/build/img/img2.jpg" alt="">
    <img width="200" id="image3" src="https://alikinvv.github.io/square-slider/build/img/img3.jpg" alt="">
    <img width="200" id="image4" src="https://alikinvv.github.io/square-slider/build/img/img4.jpg" alt="">
</div>

<div class="captions">
    <div class="caption show">
        <p class="count">26</p>
        <div class="buttonWrap"><a href="#" class="button">Architecture</a></div>
        <div class="titleWrap"><p class="title">Marine Centre</p></div>
        <div class="locWrap"><p class="loc">Auckland, New Zealand</p></div>
    </div>
    <div class="caption">
        <p class="count">12</p>
        <div class="buttonWrap"><a href="#" class="button">Architecture</a></div>
        <div class="titleWrap"><p class="title">MusΓ©e du Louvre</p></div>
        <div class="locWrap"><p class="loc">Paris, France</p></div>
    </div>
    <div class="caption">
        <p class="count">06</p>
        <div class="buttonWrap"><a href="#" class="button">Architecture</a></div>
        <div class="titleWrap"><p class="title">Arc de Triomphe</p></div>
        <div class="locWrap"><p class="loc">Paris, France</p></div>
    </div>
    <div class="caption">
        <p class="count">18</p>
        <div class="buttonWrap"><a href="#" class="button">Architecture</a></div>
        <div class="titleWrap"><p class="title">Sofia</p></div>
        <div class="locWrap"><p class="loc">Bulgaria</p></div>
    </div>
</div>

<!-- github  -->
<a href="https://github.com/alikinvv/square-slider" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js'></script>
      <script>
let settings = {};
settings.cols = 20;
settings.rows = 20;
let canvas = jQuery('#canvas')[0];
let context = canvas.getContext('2d');
let toggle1 = jQuery('#image1')[0];
let toggle2 = jQuery('#image2')[0];
let image11 = jQuery('#image1')[0];
let image2 = jQuery('#image2')[0];
let image3 = jQuery('#image3')[0];
let image4 = jQuery('#image4')[0];
let newcanvas = jQuery('<canvas></canvas>')[0];
let newcontext = newcanvas.getContext('2d');
let state = { pos: 0 };
let xw, xh, delay;
let windowW = $(window).width();
let windowH = 880;

let tl = new TimelineMax();
let tlLoad = new TimelineMax();
let tlText = new TimelineMax();
let scaleFrom = 1.2;

var autoplay = 5000;

tlText.to($('.count, .title, .loc'), 0, { y: '-100%' }).
to($('.button'), 0, { y: '-200%' }).
to($('.show .count'), 1, { ease: Power2.easeInOut, y: '0%' }).
to($('.show .button'), 1, { ease: Power2.easeInOut, y: '0%' }, '-=0.9').
to($('.show .title, .show .loc'), 1, { ease: Power2.easeInOut, y: '0%' }, '-=0.8').
to($('.show .count, .show .title, .show .loc, .show .button'), 1, { ease: Power2.easeInOut, y: '170%' }, '+=3');

function clamp(min, mid, max) {
  return mid < min ? min : mid < max ? mid : max;
}
function setCanvasSize(canvas) {
  canvas.width = windowW;
  canvas.height = windowH;
  $(canvas).css('width', windowW);
  $(canvas).css('height', windowH);
}

setCanvasSize(canvas);
setCanvasSize(newcanvas);

function RenderTempCanvas() {
  newcontext.clearRect(0, 0, windowW, windowH);
  newcontext.drawImage(toggle2, 0, 0);
  xw = windowW / settings.cols;
  xh = windowH / settings.rows;
  for (var i = 0; i <= settings.cols; i++) {
    for (var j = 0; j <= settings.rows; j++) {
      delay = j * i / (settings.cols * settings.rows);
      newcontext.clearRect(i * xw, j * xh, xw * clamp(state.pos - delay, 0, 1), xh * clamp(state.pos - delay, 0, 1));
    }
  }
}

function render(imageT) {
  context.clearRect(0, 0, windowW, windowH);
  context.drawImage(imageT, 0, 0);
  RenderTempCanvas();
  context.drawImage(newcanvas, 0, 0);
}


function draw() {
  render(toggle1);
  window.requestAnimationFrame(draw);
}

draw();
load();

setInterval(function () {
  Toggle();
  load();
}, autoplay);

function load() {
  tlLoad.to($('.load'), autoplay / 1000, { ease: Power2.easeInOut, width: '100%' }).
  to($('.load'), 0, { width: 0 });
}

function Toggle() {



  if ($('.caption.show').is(':last-child')) {
    $('.caption.show').removeClass('show');
    $('.captions .caption:first-child').addClass('show');
  } else {
    $('.caption.show').removeClass('show').next().addClass('show');
  }

  tlText.to($('.count, .title, .loc'), 0, { y: '-100%' }).
  to($('.button'), 0, { y: '-200%' }).
  to($('.show .count'), 1, { ease: Power2.easeInOut, y: '0%' }).
  to($('.show .button'), 1, { ease: Power2.easeInOut, y: '0%' }, '-=0.9').
  to($('.show .title, .show .loc'), 1, { ease: Power2.easeInOut, y: '0%' }, '-=0.8').
  to($('.show .count, .show .title, .show .loc, .show .button'), 1, { ease: Power2.easeInOut, y: '170%' }, '+=2.8');

  if (state.pos === 2) {
    tl.to(state, 2, { pos: 0, ease: Power1.easeOut });
    //tl.fromTo(canvas, 3, {scale: scaleFrom}, {scale: 1, delay: -1.7,ease: Expo.easeOut} )
    //tl.to(newcanvas, 0, {scale: 1, delay: 1});
  } else {
    tl.to(state, 2, { pos: 2, ease: Power1.easeOut });
    //tl.fromTo(canvas, 3, {scale: scaleFrom}, {scale: 1, delay: -1.7,ease: Expo.easeOut} )
    //tl.to(canvas, 0, {scale: 1, delay: 1});        
  }

  if ($('#image2').hasClass('active')) {
    $('#image2').removeClass('active');
    $('#image3').addClass('active');
    toggle1 = image3;
  } else if ($('#image3').hasClass('active')) {
    $('#image3').removeClass('active');
    $('#image4').addClass('active');
    toggle2 = image4;
  } else if ($('#image4').hasClass('active')) {
    $('#image4').removeClass('active');
    $('#image1').addClass('active');
    toggle1 = image1;
  } else if ($('#image1').hasClass('active')) {
    $('#image1').removeClass('active');
    $('#image2').addClass('active');
    toggle2 = image2;
  }
}
    </script>
</body>
</html>

5. By CrankySparrow

Made by CrankySparrow. GSAP Choppy Photo Slider, A cool photo slider with amazing animations made using jQuery. Source

  <div class="container">
    <button class="nav nav-prev">Prev</button>
    <div class="slider-images">

    </div>

    <div class="slider-text">
    
      <div class="slide">
        <h2>Slide 1</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, officiis nemo! Amet beatae maiores
          necessitatibus, ea nostrum soluta consequatur impedit repudiandae suscipit aut, esse distinctio. Porro nostrum qui
          iure explicabo.</p>
      </div>
    
      <div class="slide">
        <h2>Slide 2</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, officiis nemo! Amet beatae maiores
          necessitatibus,
          ea nostrum soluta consequatur impedit repudiandae suscipit aut, esse distinctio. Porro nostrum qui iure explicabo.
        </p>
      </div>
    
      <div class="slide">
        <h2>Slide 3</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, officiis nemo! Amet beatae maiores
          necessitatibus,
          ea nostrum soluta consequatur impedit repudiandae suscipit aut, esse distinctio. Porro nostrum qui iure explicabo.
        </p>
      </div>

      <div class="slide">
        <h2>Slide 4</h2>
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Vero, officiis nemo! Amet beatae maiores
          necessitatibus,
          ea nostrum soluta consequatur impedit repudiandae suscipit aut, esse distinctio. Porro nostrum qui iure explicabo.
        </p>
      </div>      
    
    </div>

    <button class="nav nav-next">Next</button>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/CSSRulePlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/Draggable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EaselPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/PixiPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.5/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/TextPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


-----CSS-----


@import url("https://fonts.googleapis.com/css2?family=Inconsolata&display=swap");
html, body {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  background-color: black;
}
body, body * {
  font-family: Inconsolata, Verdana, Geneva, Tahoma, sans-serif;
  color: white;
}

.container {
  margin: 20px auto;
  position: relative;
  display: flex;
  width: 1200px;
  justify-content: center;
  overflow: hidden;
}

.slider-text {
  flex: 0 0 350px;
  transition: all 200ms linear;
  position: relative;
  overflow: hidden;
  margin-left: 80px;
  height: 400px;
  align-self: stretch;
  z-index: 0;
}
.slider-text .slide {
  width: 100%;
  position: absolute;
  padding: 20px 20px 20px 40px;
  color: white;
}

.slider-images {
  flex: 0 0 400px;
  height: 400px;
  position: relative;
  z-index: 99;
}
.slider-images .slide-image {
  position: absolute;
  overflow: hidden;
  height: 100%;
  width: 100%;
  left: 10%;
  top: 10%;
}
.slider-images .slide-image img {
  height: 80%;
  width: 80%;
  object-fit: cover;
}

.nav {
  align-self: end;
  cursor: pointer;
  background-color: black;
  color: white;
  border: 0;
  border-bottom: 0px solid white;
  font-size: 2rem;
  position: relative;
}
.nav:after {
  content: "";
  background-color: white;
  display: inline-block;
  width: 0;
  height: 4px;
  transition: all 200ms linear;
  position: absolute;
  left: 0;
  bottom: 0;
}
.nav.nav-prev:after {
  left: unset;
  right: 0;
}
.nav:hover:after {
  width: 100%;
}
.backgrounds {
  position: absolute;
  width: 100%;
  height: 100%;
}
.backgrounds .bg-pieces {
  position: absolute;
  width: 100%;
  height: 100%;
}
.backgrounds .bg-pieces .bgpiece {
  background-repeat: no-repeat;
  position: relative;
  filter: brightness();
}
.backgrounds .bg-pieces .one {
  width: 110%;
  height: 80px;
  background-size: calc(100% + 100px);
  background-position: -100px -100px;
  top: 20px;
  mix-blend-mode: overlay;
  filter: brightness(1.6) hue-rotate(10deg) contrast(1.2);
}
.backgrounds .bg-pieces .two {
  width: 120%;
  height: 30px;
  left: 20px;
  z-index: 99;
  background-position: 0px -120px;
  mix-blend-mode: overlay;
  background-size: 100% auto;
}
.backgrounds .bg-pieces .three {
  width: 115%;
  height: 60px;
  background-size: 100% auto;
  background-position: 0 -200px;
  top: 60px;
  left: -50px;
  filter: brightness(1.3) saturate(0.9) hue-rotate(10deg);
}
.backgrounds .bg-pieces .four {
  width: 105%;
  height: 90px;
  background-size: calc(100% + 20px) calc(100% + 300px);
  background-position: 20px -300px;
  mix-blend-mode: overlay;
  filter: brightness(1.3) hue-rotate(20deg);
  top: 170px;
  left: 40px;
  z-index: 99;
}

.pagination {
  display: flex;
  width: 1200px;
  margin: 0 auto;
  justify-content: center;
}
.pagination > div {
  border: 1px solid white;
  padding: 5px 10px;
  margin: 15px;
  cursor: pointer;
}
.pagination > div.current {
  background-color: white;
  color: black;
}


------JS------


$(function() {

  let images = [
    "https://images.unsplash.com/photo-1591186023606-7d859f9d1b73?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80",
    "https://images.unsplash.com/photo-1591346610981-ee6670ace518?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80",    
    "https://images.unsplash.com/photo-1591333325715-faafed3f75e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80",
    "https://images.unsplash.com/photo-1591248125650-263c3d39f6d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80"
  ]

  class gsapSlider {
    constructor(images, slides, container) {
      this.images = images;
      this.slides = slides;
      this.imageContainer = $( '.slider-images' );
      this.container = container;
      this.imageSlides;
      this.pagination;
      this.cur = slides.length - 1;
      this.playing = false;

      this.setupImages();
      this.setupGsap();
      this.setPagination(); 
      this.setButtons();           
      this.moveSlide(0);
    } 

    setupImages() {
      let backgrounds = $( '<div />', {
        class: 'backgrounds'
      } );

      this.images.forEach( ( image, i ) => {
        let imageSlide = $( '<div />', {
          class: 'slide-image'
        } )
        imageSlide.append( $( '<img />', {
          src: image
        } ) );
        this.imageContainer.append( imageSlide );

        backgrounds.append( this.setupBackground(image, i) );
      } )

      this.imageSlides = $('.slide-image');
      this.imageContainer.prepend( backgrounds );    
    }

    setupBackground(image, i) {
      let bgslide = $( '<div />', {
        class: 'bg-pieces bg-' + i.toString()
      } );

      let bgpiece = $( '<div />' ).css( {
        backgroundImage: 'url("' + image + '")',
      } )

      bgpiece.clone().addClass( 'bgpiece one' ).appendTo( bgslide );
      bgpiece.clone().addClass( 'bgpiece two' ).appendTo( bgslide );
      bgpiece.clone().addClass( 'bgpiece three' ).appendTo( bgslide );
      bgpiece.clone().addClass( 'bgpiece four' ).appendTo( bgslide ); 

      return  bgslide;
    }

    setupGsap() {
      gsap.set( this.slides, { y: 40, opacity: 0 } )
      gsap.set('.one', {left: '110vw'});
      gsap.set('.two', {left: '100vw'});
      gsap.set('.three', {left: '-100vw'});
      gsap.set('.four', {left: '-100vw'});
      gsap.set('.slide-image', {y: -400});    
    }

    setButtons() {
      $('button.nav-next').click(() => {
        this.moveSlide(( this.cur < this.slides.length - 1 ) ? this.cur + 1 : 0);
      })

      $('button.nav-prev').click(() => {
        this.moveSlide((this.cur == 0) ? this.slides.length-1 : this.cur-1);
      })
      
      $('.page-trigger').click((event) => {
        this.moveSlide($(event.target).data('page') -1);
      })
    }

    moveSlide(next) {
      if (this.playing) {
        return;
      }

      let text = this.slides[this.cur];
      let inner = this.imageSlides[this.cur];
      let bgPieces = $('.bg-pieces')[this.cur];

      let tl = gsap.timeline({
        paused: true,
        defaults: {
          ease: 'power2.in',
        }
      });

      tl
        .to('.four',
          {left: -1200, duration: .5})
        .to(inner,
          {opacity: .5, duration: .6}, .2)
        .to(inner, 
          {y: -400, duration: .2}, .4)        
        .to('.two',
          {left: -1200, duration: .5}, .3)
        .to('.three',
          { left: 1400, duration: .5 }, .2 )      
        .to('.one', 
          {left: 1400, duration:.5}, .4)
        .to(text,
          {opacity: '0', duration: .4}, .1)
        .to(text,
          {y: 40, duration: .6}, '<');

      this.cur = next;

      $('.current').removeClass('current');
      this.pagination.find('.page-' + (this.cur+1)).addClass('current');
      text = this.slides[this.cur];
      inner = this.imageSlides[this.cur];
      bgPieces = $('.bg-pieces')[this.cur];  

      tl
        .to(text, 
          {y: 0, opacity: '1', duration: .8}, .5)
        .to(bgPieces.querySelector('.one'),
          {left: 0, duration: .5, ease: 'power1.out'}, .4)
        .to(bgPieces.querySelector('.three'),
          {left: '-50px', duration: .5}, '<.1')
        .to(bgPieces.querySelector( '.two' ),
            { left: '20px', duration: .6 }, '<.1' )      
        .to(bgPieces.querySelector('.four'),
          {left: '40px', duration: .6, ease: 'power1.out'}, '<.2')
        .fromTo(inner,
          {y: 400, immediateRender: false}, {y: 0, duration: .4, ease: 'power1.out'}, '<.2')   
        .to(inner,
          {opacity: 1, duration: .4}, '<')
        .to(inner.querySelector('img'), .2,
          {scale: 1.08, ease: "power1.out"}, '<')
        .to(inner.querySelector('img'), .5,
          {scale: 1, ease: "power1.out"}, '<+.2')
        .then(() => {
          this.playing = false;
        })

      tl.play();
      this.playing = true;

    }  

    setPagination() {
      let pagination = $('<div />', {
        class: 'pagination'
      });

      let len = this.slides.length;

      for (let i = 1; i <= len; i++) {
        pagination.append($('<div/>', {
          class: "page-trigger page-" + i,
          'data-page': i,
        }).append(i))
      }
      
      this.pagination = pagination;
      this.pagination.insertAfter(this.container);

    }

  }

  let slider = new gsapSlider(images, $('.slide'), $('.container'))

});

6. By Stephen Scaff

Made by Stephen Scaff. Slice Slider, Slider with popup animations, contains 4 slides, click the next or the previous button to change slides. Source

<main>
<section class="slides"> 
  
  <section class="slides-nav">
    <nav class="slides-nav__nav">
      <button class="slides-nav__prev js-prev">Prev</button>
      <button class="slides-nav__next js-next">Next</button>
    </nav>
  </section>

  <section class="slide is-active">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/nfTA8pdaq9A/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>Click, Key</span></span>
          <span class="title-line"><span>Or Scroll Fool</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/okmtVMuBzkQ/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>Slide Two</span></span>
          <span class="title-line"><span>Dood Mood</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/WuQME0I_oZA/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>This Right</span></span>
          <span class="title-line"><span>Here Makes Three</span></span>
        </h2>
      </header>
    </div>
  </section>

  <section class="slide">
    <div class="slide__content">
      <figure class="slide__figure"><div class="slide__img" style="background-image: url(https://source.unsplash.com/NsWcRlBT_74/2000x1100)"></div></figure>
      <header class="slide__header">
        <h2 class="slide__title">
          <span class="title-line"><span>How Now</span></span>
          <span class="title-line"><span>Part Four More</span></span>
        </h2>
      </header>
    </div>
  </section>
</section>
</main>

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


------CSS-------


body {
  height: 100%;
  overflow-y: hidden;
}

.slides-nav {
  z-index: 99;
  position: fixed;
  right: -5%;
  display: flex;
  align-items: center;
  height: 100%;
  color: #111;
}
@media (min-width: 54em) {
  .slides-nav {
    right: 2%;
  }
}
.slides-nav__nav {
  position: relative;
  right: 0;
  display: block;
  font-size: 1em;
  transform: rotate(90deg);
  transform-origin: center;
}
.slides-nav button {
  position: relative;
  display: inline-block;
  padding: 0.35em;
  margin: 0;
  font-family: "Space Mono", monospace;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  border: 0;
  overflow-x: hidden;
  transition: color 0.5s ease;
}
.slides-nav button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 1px;
  width: 0;
  background: #111;
  transition: width 0.4s ease;
}
.slides-nav button:hover {
  cursor: pointer;
  color: rgba(17, 17, 17, 0.75);
  transition: color 0.5s ease;
}
.slides-nav button:hover:after {
  width: 100%;
  transition: width 0.4s ease;
}
.slides-nav button:focus {
  outline: 0;
}
.is-sliding .slides-nav {
  pointer-events: none;
}

.slides {
  position: relative;
  display: block;
  height: 100vh;
  width: 100%;
  background: #fff;
  transition: background 1s cubic-bezier(0.99, 1, 0.92, 1);
}
.is-sliding .slides {
  background: #ededed;
  transition: background 0.3s cubic-bezier(0.99, 1, 0.92, 1);
}

.slide {
  z-index: -1;
  padding: 0;
  position: absolute;
  width: 100%;
  height: 100vh;
  transition: z-index 1s ease;
}
.slide.is-active {
  z-index: 19;
  transition: z-index 1s ease;
}
.slide__content {
  position: relative;
  margin: 0 auto;
  height: 95%;
  width: 95%;
  top: 2.5%;
}
@media (min-width: 54em) {
  .slide__content {
    height: 80%;
    width: 80%;
    top: 10%;
  }
}
.slide__header {
  z-index: 9;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-y: hidden;
  transform: translateX(5%);
}
@media (min-width: 54em) {
  .slide__header {
    transform: translateX(-5%);
  }
}
.slide__title {
  font-family: Montserrat, helvetica;
  font-size: 2.5em;
  font-weight: 700;
  color: #111;
  overflow-y: hidden;
}
@media (min-width: 54em) {
  .slide__title {
    font-size: 5em;
  }
}
.slide__title .title-line {
  display: block;
  overflow-y: hidden;
}
.slide__title .title-line span {
  display: inline-block;
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.8s ease;
}
.slide__title .title-line span:nth-child(1) {
  transition-delay: 0.15s;
}
.slide__title .title-line span:nth-child(2) {
  transition-delay: 0.3s;
}
.is-active .slide__title .title-line span {
  transform: translate3d(0, 0%, 0);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
}
.is-active .slide__title .title-line:nth-of-type(2n) span {
  transition-delay: 0.2s;
}
.slide__figure {
  z-index: 7;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  height: 100%;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.is-sliding .slide__figure {
  transform: scale(0.8);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}
.slide__img {
  position: relative;
  display: block;
  background-size: cover;
  background-attachment: fixed;
  background-position: 50%;
  -webkit-backface-visibility: hidden;
  height: 0%;
  width: 100%;
  filter: grayscale(0%);
  transition: height 1s 1.4s cubic-bezier(0.19, 1, 0.22, 1), filter 0.4s 0.1s ease;
}
.is-active .slide__img {
  height: 100%;
  opacity: 1;
  transition: height 0.5s 0.3s cubic-bezier(0.77, 0, 0.175, 1), filter 0.4s 0.1s ease;
}
.is-sliding .slide__img {
  filter: grayscale(100%);
}



------JS-------


(function($) {
 
  var SliceSlider = {
    
    /**
     * Settings Object
     */
    settings: {
      delta:              0,
      currentSlideIndex:  0,
      scrollThreshold:    40,
      slides:             $('.slide'),
      numSlides:          $('.slide').length,
      navPrev:            $('.js-prev'),
      navNext:            $('.js-next'),
    },
    
    /**
     * Init
     */
    init: function() {
      s = this.settings;
      this.bindEvents();
    },
    
    /**
     * Bind our click, scroll, key events
     */
    bindEvents: function(){
      
      // Scrollwheel & trackpad
      s.slides.on({
        'DOMMouseScroll mousewheel' : SliceSlider.handleScroll
      });
      // On click prev
      s.navPrev.on({
        'click' : SliceSlider.prevSlide
      });
      // On click next
      s.navNext.on({
        'click' : SliceSlider.nextSlide
      });
      // On Arrow keys
      $(document).keyup(function(e) {
        // Left or back arrows
        if ((e.which === 37) ||  (e.which === 38)){
          SliceSlider.prevSlide();
        }
        // Down or right
        if ((e.which === 39) ||  (e.which === 40)) {
          SliceSlider.nextSlide();
        }
      });
    },
    
    /** 
     * Interept scroll direction
     */
    handleScroll: function(e){

      // Scrolling up
      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) { 

        s.delta--;
     
        if ( Math.abs(s.delta) >= s.scrollThreshold) {
          SliceSlider.prevSlide();
        }
      }
 
      // Scrolling Down
      else {
 
        s.delta++;
 
        if (s.delta >= s.scrollThreshold) {
          SliceSlider.nextSlide();
        }
      }
 
      // Prevent page from scrolling
      return false;
    },

    /**
     * Show Slide
     */
    showSlide: function(){ 
      // reset
      s.delta = 0;
      // Bail if we're already sliding
      if ($('body').hasClass('is-sliding')){
        return;
      }
      // Loop through our slides
      s.slides.each(function(i, slide) {

        // Toggle the is-active class to show slide
        $(slide).toggleClass('is-active', (i === s.currentSlideIndex)); 
        $(slide).toggleClass('is-prev', (i === s.currentSlideIndex - 1)); 
        $(slide).toggleClass('is-next', (i === s.currentSlideIndex + 1)); 
        
        // Add and remove is-sliding class
        $('body').addClass('is-sliding');

        setTimeout(function(){
            $('body').removeClass('is-sliding');
        }, 1000);
      });
    },

    /**
     * Previous Slide
     */
    prevSlide: function(){
      
      // If on first slide, loop to last
      if (s.currentSlideIndex <= 0) {
        s.currentSlideIndex = s.numSlides;
      }
      s.currentSlideIndex--;
      
      SliceSlider.showSlide();
    },

    /**
     * Next Slide
     */
    nextSlide: function(){
      
      s.currentSlideIndex++;
   
      // If on last slide, loop to first
      if (s.currentSlideIndex >= s.numSlides) { 
        s.currentSlideIndex = 0;
      }
 
      SliceSlider.showSlide();
    },
  };
  SliceSlider.init();
})(jQuery);

7. By Michael Lewallen

Made by Michael Lewallen. Vertical Thumbnail Slider | Slick Slider, Click the up and down arrows to change the image. Source

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="rtl-slider-flex">
	<div class="rtl-slider">
	  <div class="rtl-slider-slide" style="background-image: url('https://images.pexels.com/photos/91216/pexels-photo-91216.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
	  </div>
	  <div class="rtl-slider-slide" style="background-image: url('https://images.pexels.com/photos/375732/pexels-photo-375732.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
	  </div>
	  <div class="rtl-slider-slide" style="background-image: url('https://images.pexels.com/photos/40023/aurora-northern-lights-aurora-borealis-borealis-40023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
	  </div>
	</div>
	<div class="rtl-slider-nav">
		<div class="rtl-slider-slide" style="background-image: url('https://images.pexels.com/photos/91216/pexels-photo-91216.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
	  </div>
	  <div class="rtl-slider-slide" style="background-image: url('https://images.pexels.com/photos/375732/pexels-photo-375732.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
	  </div>
	  <div class="rtl-slider-slide" style="background-image: url('https://images.pexels.com/photos/40023/aurora-northern-lights-aurora-borealis-borealis-40023.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');">
	  </div>
	</div>
	<span class="thumb-prev"><i class="fa fa-angle-up fa-lg"></i></span>
	<span class="thumb-next"><i class="fa fa-angle-down fa-lg"></i><span>
</div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'></script>



-------CSS--------


body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #00b09b, #96c93d);
}
/* Remove for prod */
.rtl-slider-flex {
  width: 50%;
  margin: 10em auto;
  padding: 0.75em 0.75em 0.5em;
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
}
.thumb-prev,
.thumb-next {
  bottom: 12px !important;
  right: calc(9% + 0.75em) !important;
}
.thumb-prev {
  right: calc(0% + 0.75em) !important;
}
/* Necessary styles */
.rtl-slider-flex {
  display: flex;
  flex-direction: row;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
}
.rtl-slider-flex .rtl-slider {
  width: 80%;
  margin-right: 1%;
}
.rtl-slider-flex .rtl-slider-nav {
  width: 19%;
  margin-top: -2px;
}
.rtl-slider-flex .rtl-slider-nav .rtl-slider-slide {
  padding-top: 90%;
  margin-bottom: 4px;
  opacity: 0.75;
  transition: all 0.3s ease;
  cursor: pointer;
}
.rtl-slider-flex .rtl-slider-nav .slick-slide.slick-current.slick-active .rtl-slider-slide {
  opacity: 1;
}
.rtl-slider-flex .rtl-slider-slide {
  background: #0b69b7 url("") no-repeat center/cover;
  padding-top: 56.25%;
}
.rtl-slider-flex .thumb-prev,
.rtl-slider-flex .thumb-next {
  position: absolute;
  bottom: 4px;
  right: 0;
  height: 88px;
  width: 9.5%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
}
.rtl-slider-flex .thumb-prev {
  right: 9.5%;
}



--------JS---------


$(document).ready(function () {
  $('.rtl-slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.rtl-slider-nav' });

  $('.rtl-slider-nav').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    vertical: true,
    asNavFor: '.rtl-slider',
    centerMode: false,
    focusOnSelect: true,
    prevArrow: ".thumb-prev",
    nextArrow: ".thumb-next" });

});
//# sourceURL=pen.js

8. By David

Made by David. Responsive horizontal timeline using Slick 1.9.0 / Bootstrap 4.5.2 & jQuery, A simplistic yet beautiful timeline slider. Source

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css'>

<section class="timeline-carousel">
   <div class="container">
      <div class="row">
         <div class="col-8 offset-2 text-center mb-5">
            <h1>Horizontal timeline</h1>
            <p class="lead text-muted">Below is a concept of a horizontal timeline slider. You can drag the slides or click on the previous and next buttons.</p> 
            <p><a class="text-white" target="_blank" href="https://codepen.io/davidbiek/pen/BaWYWME">Bootstrap 5 version</a></p>
         </div>
      </div>
   </div>
   <div class="timeline-carousel__item-wrapper" data-js="timeline-carousel">
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2001-2003</span>
            <span class="month">Eget felis eget nunc lobortis mattis</span>
            <p>Eget felis eget nunc lobortis mattis aliquam faucibus. Viverra nam libero justo laoreet sit amet. Elementum pulvinar etiam non quam lacus suspendisse faucibus. Nam libero justo laoreet sit amet cursus sit amet. Risus sed vulputate odio ut enim blandit. Quam adipiscing vitae proin sagittis nisl rhoncus.</p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2003</span>
            <span class="month">Tristique magna sit amet</span>
            <p>Tristique magna sit amet purus gravida quis blandit turpis.</p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2003</span>
            <span class="month">Mauris pellentesque pulvinar pellentesque habitant</span>
            <p>Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Eu turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Cursus in hac habitasse platea dictumst quisque. Ipsum dolor sit amet consectetur adipiscing elit. </p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2004</span>
            <span class="month">Cum sociis natoque penatibus</span>
            <p>Cum sociis natoque penatibus et magnis dis. Interdum velit laoreet id donec ultrices tincidunt arcu non. Lorem sed risus ultricies tristique. Dui vivamus arcu felis bibendum ut. Tortor id aliquet lectus proin nibh nisl condimentum id.</p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <div class="pointer"></div>
            <span class="month">Dictumst vestibulum rhoncus est</span>
            <p>Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Posuere ac ut consequat semper.</p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2005</span>
            <span class="month">Id nibh tortor id aliquet</span>
            <p>Nunc eget lorem dolor sed viverra. Id nibh tortor id aliquet. Sed blandit libero volutpat sed cras. Fermentum posuere urna nec tincidunt praesent. Id ornare arcu odio ut sem nulla pharetra diam.</p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2006</span>
            <span class="month">Pulvinar neque laoreet suspendisse</span>
            <p>Pulvinar neque laoreet suspendisse interdum consectetur. Libero volutpat sed cras ornare. Ac auctor augue mauris augue.</p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->
      
      <!--Timeline item-->
      <div class="timeline-carousel__item">
         <div class="timeline-carousel__image">
            <div class="media-wrapper media-wrapper--overlay" style="background: url('https://via.placeholder.com/550x320/171717/cccccc?text=550x320') center center; background-size:cover;"></div>
         </div>
         <div class="timeline-carousel__item-inner">
            <span class="year">2007</span>
            <span class="month">Egestas quis ipsum</span>
            <p>Non odio euismod lacinia at. Egestas quis ipsum suspendisse ultrices gravida. Dui nunc mattis enim ut tellus elementum sagittis vitae. Lectus quam id leo in vitae turpis massa sed elementum. Ridiculus mus mauris vitae ultricies leo integer malesuada. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus./p>
            <a href="#" class="read-more">Read more</a>
         </div>
      </div>
      <!--/Timeline item-->

   </div>

     <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js'></script>


--------CSS--------


@import url("https://fonts.googleapis.com/css?family=Libre+Franklin:300,400,600,700,800,900&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto:300&display=swap");
* {
  outline: none;
}

.timeline-carousel {
  margin: 0;
  background-color: #323232;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  padding: 86px 6.9444% 90px 6.9444%;
  position: relative;
  overflow: hidden;
}
.timeline-carousel:after, .timeline-carousel:before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  height: 100%;
  width: 6.9444%;
  background-color: #323232;
  z-index: 3;
  width: 6.9444%;
}
.timeline-carousel:after {
  left: 0;
}
.timeline-carousel:before {
  right: 0;
  opacity: 0;
}
.timeline-carousel .slick-list {
  overflow: visible;
}
.timeline-carousel .slick-dots {
  bottom: -73px;
}
.timeline-carousel h1 {
  color: white;
  font-family: "Libre Franklin", sans-serif;
  font-weight: 700;
}
.timeline-carousel p {
  color: white;
  font-weight: 300;
}
.timeline-carousel__image {
  padding-right: 30px;
}
.timeline-carousel__item {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
}
.timeline-carousel__item .media-wrapper {
  opacity: 0.4;
  padding-bottom: 71.4%;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.timeline-carousel__item:last-child .timeline-carousel__item-inner:after {
  width: calc(100% - 30px);
}
.timeline-carousel__item-inner {
  position: relative;
  padding-top: 45px;
}
.timeline-carousel__item-inner:after {
  position: absolute;
  width: 100%;
  top: 45px;
  left: 0;
  content: "";
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.timeline-carousel__item-inner .year {
  font-family: "Libre Franklin", sans-serif;
  font-size: 36px;
  line-height: 36px;
  color: white;
  display: table;
  letter-spacing: -1px;
  padding-right: 10px;
  background-color: #323232;
  z-index: 1;
  position: relative;
  margin: -15px 0 20px;
  font-weight: 700;
}
.timeline-carousel__item-inner .year:after {
  content: "";
  position: absolute;
  display: block;
  left: -10px;
  top: 0;
  height: 100%;
  width: 10px;
  background-color: #323232;
  z-index: 3;
}
.timeline-carousel__item-inner .month {
  font-family: "Libre Franklin", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #ffc107;
  display: block;
  margin-bottom: 10px;
  font-weight: 600;
}
.timeline-carousel__item-inner p {
  font-size: 12px;
  line-height: 18px;
  color: white;
  width: 60%;
  font-weight: 400;
  margin-bottom: 15px;
}
.timeline-carousel__item-inner .read-more {
  font-size: 12px;
  color: #ffc107;
  display: table;
  margin-bottom: 10px;
  font-weight: 900;
  text-decoration: none;
  position: relative;
}
.timeline-carousel__item-inner .read-more:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  border-bottom: 2px solid #ffc107;
  -webkit-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.2s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.timeline-carousel__item-inner .read-more:hover:after {
  width: 100%;
}
.timeline-carousel__item-inner .pointer {
  height: 29px;
  position: relative;
  z-index: 1;
  margin: -4px 0 16px;
}
.timeline-carousel__item-inner .pointer:after, .timeline-carousel__item-inner .pointer:before {
  position: absolute;
  content: "";
}
.timeline-carousel__item-inner .pointer:after {
  width: 9px;
  height: 9px;
  border-radius: 100%;
  top: 0;
  left: 0;
  background-color: #ffc107;
}
.timeline-carousel__item-inner .pointer:before {
  width: 1px;
  height: 100%;
  top: 0;
  left: 4px;
  background-color: #ffc107;
}
.timeline-carousel .slick-active .media-wrapper {
  opacity: 1 !important;
}

.slick-dots {
  bottom: 160px;
  list-style: none;
  position: absolute;
  width: 100%;
  left: 0;
  text-align: center;
  z-index: 2;
}
.slick-dots li {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  display: inline-block;
  margin: 0 6px;
  position: relative;
  width: 10px;
  height: 10px;
}
.slick-dots li:last-child {
  margin-right: 0;
}
.slick-dots li.slick-active button {
  background: #ffc107;
  border-color: #ffc107;
}
.slick-dots li button {
  display: block;
  font-size: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  background-color: rgba(255, 255, 255, 0.6);
  border-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  -webkit-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  -o-transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition: all 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53);
}
.slick-dots li button:hover {
  background: #ffc107;
  border-color: #ffc107;
}

.link {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 20px;
  z-index: 9999;
}
.link a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #fff;
}
.link .fa {
  font-size: 28px;
  margin-right: 8px;
  color: #fff;
}

.slick-prev svg, .slick-next svg {
  height: auto;
  width: 18px;
  padding-bottom: 2px;
}
.slick-prev .btn, .slick-next .btn {
  border-radius: 0;
  font-family: "Libre Franklin", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.slick-prev, .slick-next {
  position: absolute;
  top: 0;
  z-index: 9999;
  border-radius: 0;
  font-family: "Libre Franklin", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 700;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 30px;
}



-------JS-------


$.js = function (el) {
  return $('[data-js=' + el + ']');
};

function carousel() {
  $.js('timeline-carousel').slick({
    infinite: false,
    arrows: true,
    arrows: true,
    prevArrow: '<div class="slick-prev"> <div class="btn mr-3 btn-warning d-flex justify-content-center align-items-center"> <div>Previous</div><svg class="ml-1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve"> <path d="M10.1,19.1l1.5-1.5L7,13h14.1v-2H7l4.6-4.6l-1.5-1.5L3,12L10.1,19.1z"/> </svg></div></div>',
    nextArrow: '<div class="slick-next"> <div class="btn btn-warning d-flex justify-content-center align-items-center"> <svg class="mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M 14 4.9296875 L 12.5 6.4296875 L 17.070312 11 L 3 11 L 3 13 L 17.070312 13 L 12.5 17.570312 L 14 19.070312 L 21.070312 12 L 14 4.9296875 z"/> </svg> <div>Next</div></div></div>',
    dots: true,
    autoplay: false,
    speed: 1100,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [
    {
      breakpoint: 800,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1 } }] });



}

carousel();

9. By Radu

Made by Radu. TweenMax Draggable Infinite Slideshow with Parallax Effect [INTERACTION], click the right and left arrows to change slides. Source

<div id="slideshow-container" class="slideshow-container">
  <div class="slides-styler-wrapper">
    <div id="slides-container" class="slides-container">
      
      <div class="slide">
        <div class="image-container layer1">
          <div class="image image1" style="background-image: url(https://raw.githubusercontent.com/maxym11/fancy-carousel-assets/master/CUUB%20PNK.png);"></div>
        </div>
        <span class="text layer2 color1">CUBE X2</span>
        <div class="image-container layer3">
          <div class="image image2" style="background-image: url(https://raw.githubusercontent.com/maxym11/fancy-carousel-assets/master/CUUB%20PNK.png);"></div>
        </div>
      </div>

      <div class="slide">
        <span class="text layer1 color2">CUBE</span>
        <div class="image-container layer2">
          <div class="image" style="background-image: url(https://raw.githubusercontent.com/maxym11/fancy-carousel-assets/master/CUUB%20PNK.png);"></div>
        </div>
      </div>

      <div class="slide">
        <div class="image-container layer1">
          <div class="image image1" style="background-image: url(https://raw.githubusercontent.com/maxym11/fancy-carousel-assets/master/SPHEER%20PNK.png);"></div>
        </div>
        <span class="text layer2 color1">SPHERE X2</span>
        <div class="image-container layer3">
          <div class="image image2" style="background-image: url(https://raw.githubusercontent.com/maxym11/fancy-carousel-assets/master/SPHEER%20PNK.png);"></div>
        </div>
      </div>

      <div class="slide">
        <span class="text layer1 color2">SPHERE</span>
        <div class="image-container layer2">
          <div class="image" style="background-image: url(https://raw.githubusercontent.com/maxym11/fancy-carousel-assets/master/SPHEER%20PNK.png);"></div>
        </div>
      </div>
      
    </div>
  </div>

  <div id="previous-arrow" class="previous-arrow"></div>
  <div id="next-arrow" class="next-arrow"></div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>


-------CSS-------


@import url("https://fonts.googleapis.com/css?family=Poppins");
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  overflow: hidden;
  font-family: "Poppins", sans-serif;
  font-weight: 900;
  text-align: center;
  letter-spacing: 0.15em;
  margin: 0;
  padding: 0;
  background-color: #fff;
  user-select: none;
}

.slideshow-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: all 0.6s ease;
  width: 100%;
  height: 100%;
  cursor: pointer;
  visibility: hidden;
}
.slideshow-container .slides-styler-wrapper {
  overflow: hidden;
  position: relative;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  vertical-align: middle;
  z-index: 95;
}
.slideshow-container .slides-styler-wrapper .slides-container {
  overflow: hidden;
  display: flex;
  position: relative;
  top: 0;
  left: -100vw;
  width: 1000vw;
  z-index: 97;
}
.slideshow-container .slides-styler-wrapper .slides-container.shifting {
  transition: left 0.2s ease-in-out;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide {
  width: 100vw;
  height: 100vh;
  cursor: pointer;
  transition: all 0.6s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 98;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .image-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transform: translate(0%, 0%);
  overflow: hidden;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .image-container .image {
  width: 40vmax;
  height: 40vmax;
  position: absolute;
  background-position: center;
  background-size: 90%;
  background-repeat: no-repeat;
  filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .image-container .image.image1 {
  width: 15vmax;
  height: 15vmax;
  transform: translate(80%, 40%);
  filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .image-container .image.image2 {
  width: 10vmax;
  height: 10vmax;
  transform: translate(-150%, -50%) rotate(-45deg);
  filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .layer1 {
  z-index: 101;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .layer2 {
  z-index: 100;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .layer3 {
  z-index: 99;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .text {
  font-size: 10vmax;
  position: absolute;
  transform: translate(0%, 0%);
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .color1 {
  color: #000;
}
.slideshow-container .slides-styler-wrapper .slides-container .slide .color2 {
  color: #fff;
}
.slideshow-container .previous-arrow {
  transform: translate(-40vw, 0%) rotate(90deg);
  transition: background 0.5s;
  position: absolute;
  width: 4.5vmax;
  height: 4.5vmax;
  cursor: pointer;
  z-index: 101;
  opacity: 0.8;
}
.slideshow-container .next-arrow {
  position: absolute;
  transform: translate(40vw, 0%) rotate(-90deg);
  transition: background 0.5s;
  width: 4.5vmax;
  height: 4.5vmax;
  cursor: pointer;
  z-index: 101;
  opacity: 0.8;
}
.slideshow-container.animation-reveal {
  pointer-events: none;
}
.slideshow-container.animation-reveal .text {
  animation: reveal-text 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-container.animation-reveal .image {
  animation: reveal-image 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-container.animation-reveal .image1 {
  animation: reveal-image1 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-container.animation-reveal .image2 {
  animation: reveal-image2 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-container.animation-reveal .previous-arrow {
  animation: reveal-arrow 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-container.animation-reveal .next-arrow {
  animation: reveal-arrow 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.slideshow-container.animation-previous {
  pointer-events: none;
}
.slideshow-container.animation-previous .text {
  animation: previous-text 0.6s 0.085s;
}
.slideshow-container.animation-previous .image {
  animation: previous-image 0.6s 0.085s;
}
.slideshow-container.animation-previous .image1 {
  animation: previous-image1 0.6s 0.085s;
}
.slideshow-container.animation-previous .image2 {
  animation: previous-image2 0.6s 0.085s;
}
.slideshow-container.animation-previous .previous-arrow {
  animation: previous-left-arrow 0.6s;
}
.slideshow-container.animation-previous .next-arrow {
  animation: previous-right-arrow 0.6s;
}
.slideshow-container.animation-next {
  pointer-events: none;
}
.slideshow-container.animation-next .text {
  animation: next-text 0.6s 0.085s;
}
.slideshow-container.animation-next .image {
  animation: next-image 0.6s 0.085s;
}
.slideshow-container.animation-next .image1 {
  animation: next-image1 0.6s 0.085s;
}
.slideshow-container.animation-next .image2 {
  animation: next-image2 0.6s 0.085s;
}
.slideshow-container.animation-next .previous-arrow {
  animation: next-left-arrow 0.6s;
}
.slideshow-container.animation-next .next-arrow {
  animation: next-right-arrow 0.6s;
}

@keyframes reveal-text {
  0% {
    opacity: 0;
    transform: translate(0, 100%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes reveal-image {
  0% {
    opacity: 0;
    transform: translate(0, -100%);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes reveal-image1 {
  0% {
    opacity: 0;
    transform: translate(80%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(80%, 40%);
  }
}
@keyframes reveal-image2 {
  0% {
    opacity: 0;
    transform: translate(-150%, -150%) rotate(-45deg);
  }
  100% {
    opacity: 1;
    transform: translate(-150%, -50%) rotate(-45deg);
  }
}
@keyframes reveal-arrow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.8;
  }
}
@keyframes previous-text {
  35% {
    transform: translate(-3%, 0%);
  }
  to {
    transform: translate(0%, 0%);
  }
}
@keyframes previous-image {
  25%, 30% {
    transform: translate(-6%, 0%);
  }
  to {
    transform: translate(0%, 0%);
  }
}
@keyframes previous-image1 {
  45%, 50% {
    transform: translate(60%, 40%);
  }
  to {
    transform: translate(80%, 40%);
  }
}
@keyframes previous-image2 {
  25%, 30% {
    transform: translate(-180%, -50%) rotate(-45deg);
  }
  to {
    transform: translate(-150%, -50%) rotate(-45deg);
  }
}
@keyframes previous-left-arrow {
  50% {
    transform: translateX(calc(-40vw - 3px)) rotate(90deg);
  }
}
@keyframes previous-right-arrow {
  50% {
    transform: translateX(calc(40vw - 3px)) rotate(-90deg);
  }
}
@keyframes next-text {
  35% {
    transform: translate(3%, 0%);
  }
  to {
    transform: translate(0%, 0%);
  }
}
@keyframes next-image {
  25%, 30% {
    transform: translate(6%, 0%);
  }
  to {
    transform: translate(0%, 0%);
  }
}
@keyframes next-image1 {
  45%, 50% {
    transform: translate(100%, 40%);
  }
  to {
    transform: translate(80%, 40%);
  }
}
@keyframes next-image2 {
  25%, 30% {
    transform: translate(-120%, -50%) rotate(-45deg);
  }
  to {
    transform: translate(-150%, -50%) rotate(-45deg);
  }
}
@keyframes next-left-arrow {
  50% {
    transform: translateX(calc(-40vw + 3px)) rotate(90deg);
  }
}
@keyframes next-right-arrow {
  50% {
    transform: translateX(calc(40vw + 3px)) rotate(-90deg);
  }
}


------JS------


var slideshow_container = document.getElementById("slideshow-container"),
slides_container = document.getElementById("slides-container"),
previous_arrow = document.getElementById("previous-arrow"),
next_arrow = document.getElementById("next-arrow");

$(document).ready(function () {
  slideshow_container.classList.add("animation-reveal");
  $(".text").css("opacity", "0");
  $(".image").css("opacity", "0");
  $(".image1").css("opacity", "0");
  $(".image2").css("opacity", "0");
  $(".previous-arrow").css("opacity", "0");
  $(".next-arrow").css("opacity", "0");
  $(".slideshow-container").css("visibility", "visible");
  setTimeout(() => {
    slideshow_container.classList.remove("animation-reveal");
    $(".text").css("opacity", "1");
    $(".image").css("opacity", "1");
    $(".image1").css("opacity", "1");
    $(".image2").css("opacity", "1");
    $(".previous-arrow").css("opacity", "0.8");
    $(".next-arrow").css("opacity", "0.8");
  }, 1000);
});

const bg_color_options = ["#88D3CE", "#FF85A1", "#88D3CE", "#FF85A1"];
//const text_color_options = ["#000", "#fff", "#000", "#fff"];
const arrow_color_options = [
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23000'%3E%3C/polygon%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23fff'%3E%3C/polygon%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23000'%3E%3C/polygon%3E%3C/svg%3E",
"data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 256 256'%3E%3Cpolygon points='225.813,48.907 128,146.72 30.187,48.907 0,79.093 128,207.093 256,79.093' fill='%23fff'%3E%3C/polygon%3E%3C/svg%3E"];

var k = 0;

function slide(
slideshow_container,
slides_container,
previous_arrow,
next_arrow)
{
  var posX1 = 0,
  posX2 = 0,
  posInitial,
  posFinal,
  threshold = 100,
  slides = slides_container.getElementsByClassName("slide"),
  slidesLength = slides.length,
  slideSize = slides_container.getElementsByClassName("slide")[0].offsetWidth,
  firstSlide = slides[0],
  lastSlide = slides[slidesLength - 1],
  cloneFirst = firstSlide.cloneNode(true),
  cloneLast = lastSlide.cloneNode(true),
  index = 0,
  allowShift = true;

  slides_container.appendChild(cloneFirst);
  slides_container.insertBefore(cloneLast, firstSlide);
  slideshow_container.classList.add("loaded");

  slides_container.onmousedown = dragStart;

  slides_container.addEventListener("touchstart", dragStart);
  slides_container.addEventListener("touchend", dragEnd);
  slides_container.addEventListener("touchmove", dragAction);

  slideshow_container.style.background = bg_color_options[k];
  $(".previous-arrow").css(
  "background-image",
  'url("' + arrow_color_options[k] + '")');

  $(".next-arrow").css(
  "background-image",
  'url("' + arrow_color_options[k] + '")');

  //$(".text").css("color", text_color_options[k]);

  previous_arrow.addEventListener("click", function () {
    shiftSlide(-1);
    mouse.moved = false;

    slideshow_container.classList.add("animation-next");
    setTimeout(() => {
      slideshow_container.classList.remove("animation-next");
    }, 650);

    if (k === 0) {
      k = bg_color_options.length;
    }
    k = k - 1;
    slideshow_container.style.background = bg_color_options[k];
    $(".previous-arrow").css(
    "background-image",
    'url("' + arrow_color_options[k] + '")');

    $(".next-arrow").css(
    "background-image",
    'url("' + arrow_color_options[k] + '")');

    //$(".text").css("color", text_color_options[k]);
  });

  next_arrow.addEventListener("click", function () {
    shiftSlide(1);
    mouse.moved = false;

    slideshow_container.classList.add("animation-previous");
    setTimeout(() => {
      slideshow_container.classList.remove("animation-previous");
    }, 650);

    k = k + 1;
    k = k % bg_color_options.length;
    slideshow_container.style.background = bg_color_options[k];
    $(".previous-arrow").css(
    "background-image",
    'url("' + arrow_color_options[k] + '")');

    $(".next-arrow").css(
    "background-image",
    'url("' + arrow_color_options[k] + '")');

    //$(".text").css("color", text_color_options[k]);
  });

  slides_container.addEventListener("transitionend", checkIndex);

  function dragStart(e) {
    e = e || window.event;
    e.preventDefault();
    posInitial = slides_container.offsetLeft;

    if (e.type == "touchstart") {
      posX1 = e.touches[0].clientX;
    } else {
      posX1 = e.clientX;
      document.onmouseup = dragEnd;
      document.onmousemove = dragAction;
    }
  }

  function dragAction(e) {
    e = e || window.event;

    if (e.type == "touchmove") {
      posX2 = posX1 - e.touches[0].clientX;
      posX1 = e.touches[0].clientX;
    } else {
      posX2 = posX1 - e.clientX;
      posX1 = e.clientX;
    }
    slides_container.style.left = slides_container.offsetLeft - posX2 + "px";
  }

  function dragEnd(e) {
    posFinal = slides_container.offsetLeft;
    if (posFinal - posInitial < -threshold) {
      shiftSlide(1, "drag");
      slideshow_container.classList.add("animation-previous");
      setTimeout(() => {
        slideshow_container.classList.remove("animation-previous");
      }, 650);
      k = k + 1;
      k = k % bg_color_options.length;
      slideshow_container.style.background = bg_color_options[k];
      $(".previous-arrow").css(
      "background-image",
      'url("' + arrow_color_options[k] + '")');

      $(".next-arrow").css(
      "background-image",
      'url("' + arrow_color_options[k] + '")');

      //$(".text").css("color", text_color_options[k]);
    } else if (posFinal - posInitial > threshold) {
      shiftSlide(-1, "drag");
      slideshow_container.classList.add("animation-next");
      setTimeout(() => {
        slideshow_container.classList.remove("animation-next");
      }, 650);
      if (k === 0) {
        k = bg_color_options.length;
      }
      k = k - 1;
      slideshow_container.style.background = bg_color_options[k];
      $(".previous-arrow").css(
      "background-image",
      'url("' + arrow_color_options[k] + '")');

      $(".next-arrow").css(
      "background-image",
      'url("' + arrow_color_options[k] + '")');

      //$(".text").css("color", text_color_options[k]);
    } else {
      slides_container.style.left = posInitial + "px";
    }

    document.onmouseup = null;
    document.onmousemove = null;
  }

  function shiftSlide(direction, action) {
    slides_container.classList.add("shifting");

    if (allowShift) {
      if (!action) {
        posInitial = slides_container.offsetLeft;
      }

      if (direction == 1) {
        slides_container.style.left = posInitial - slideSize + "px";
        index++;
      } else if (direction == -1) {
        slides_container.style.left = posInitial + slideSize + "px";
        index--;
      }
    }

    allowShift = false;
  }

  function checkIndex() {
    slides_container.classList.remove("shifting");

    if (index == -1) {
      slides_container.style.left = -(slidesLength * slideSize) + "px";
      index = slidesLength - 1;
    }

    if (index == slidesLength) {
      slides_container.style.left = -(1 * slideSize) + "px";
      index = 0;
    }

    allowShift = true;
  }
}
slide(slideshow_container, slides_container, previous_arrow, next_arrow);

//---___---___---___---___---___---___---___---___---//
var slideshow_parameters = $(".slideshow-container")[0].getBoundingClientRect();
var mouse = { x: 0, y: 0, moved: false };

$(".slideshow-container").mousemove(function (e) {
  mouse.moved = true;
  mouse.x = e.clientX - slideshow_parameters.left;
  mouse.y = e.clientY - slideshow_parameters.top;
});

$(".slideshow-container").mouseleave(function (e) {
  mouse.moved = false;
  mouse.x = e.clientX - slideshow_parameters.left;
  mouse.y = e.clientY - slideshow_parameters.top;
});

TweenLite.ticker.addEventListener("tick", function () {
  if (mouse.moved) {
    parallaxIt(".image-container", 25);
    parallaxIt(".text", -65);
  } else if (!mouse.moved) {
    parallaxIt(".image-container", 0);
    parallaxIt(".text", 0);
  }
});

function parallaxIt(target, movement) {
  TweenMax.to(target, 0.7, {
    x:
    (mouse.x - slideshow_parameters.width / 2) /
    slideshow_parameters.width /
    2 *
    movement,
    y:
    (mouse.y - slideshow_parameters.height / 2) /
    slideshow_parameters.height /
    2 *
    movement });

}

$(window).on("resize scroll", function () {
  slideshow_parameters = $(".slideshow-container")[0].getBoundingClientRect();
});
//# sourceURL=pen.js

10. By Ivan Grozdic

Made by Ivan Grozdic. Hover Slider with cursor animation, hover over any option to change the slider. Source

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
    <div class="section">
			<ul class="case-study-wrapper">
				<li class="case-study-name">                            	
					<a href="#" class="hover-target">russian model</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">girl in boots</a>
				</li>
				<li class="case-study-name">                                        	
					<a href="#" class="hover-target">autumn leaves</a>
				</li>
				<li class="case-study-name">                                         	
					<a href="#" class="hover-target">in the woods</a>
				</li>
			</ul>
			<ul class="case-study-images">
				<li>
					<div class="img-hero-background"></div> 
					<div class="dark-over-hero"></div>  
					<div class="hero-number-back">01</div> 
					<div class="hero-number">01</div> 
					<div class="hero-number-fixed">04</div> 
					<div class="case-study-title">graphic design, interaction</div> 
				</li>
				<li>
					<div class="img-hero-background"></div> 
					<div class="hero-number-back">02</div> 
					<div class="hero-number">02</div>  
					<div class="case-study-title">advertising, art direction</div> 
				</li>
				<li>
					<div class="img-hero-background"></div>
					<div class="hero-number-back">03</div>  
					<div class="hero-number">03</div> 
					<div class="case-study-title">photography, retouching</div> 
				</li>
				<li>
					<div class="img-hero-background"></div> 
					<div class="hero-number-back">04</div> 
					<div class="hero-number">04</div> 
					<div class="case-study-title">photography, advertising</div> 
				</li>
			</ul>	
		</div>
		
		<!-- Page cursor
		================================================== -->
		
        <div class='cursor' id="cursor"></div>
        <div class='cursor2' id="cursor2"></div>
        <div class='cursor3' id="cursor3"></div> 
  
<!-- Link to page
	================================================== -->

<a href="https://themeforest.net/user/ig_design/portfolio"      class="link-to-portfolio hover-target" target=”_blank”       ></a>

<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://code.jquery.com/jquery-2.2.2.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js'></script>



------CSS-------


@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,devanagari,greek,greek-ext,latin-ext,vietnamese');

body{
	width: 100%;
  height: 100vh;
  background: #000;
	overflow: hidden;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%
}
.cursor{
	background-color: #fff;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
	box-shadow: 0 0 22px rgba(255, 255, 255, 0.6);
}
.cursor2.hover{
	background: rgba(255,255,255,.1);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

/* #Slider
================================================== */

.section{
	position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
	background-color: #212121;
}

/* Case Study Showcase
================================================== */

.case-study-wrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 10;
	width: auto;
	margin: 0;
	padding: 0;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	list-style: none;
}
.case-study-wrapper .case-study-name a {
	position: relative;
	list-style: none;
	margin: 0;
	display: block;
	text-align: center;
	padding: 0;
	font-size: 28px;
	margin-top: 25px;
	margin-bottom: 25px;
	font-family: 'Poppins', sans-serif;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 2px;
	color: #8e8d9a;
	opacity: 0.5;
	text-decoration: none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-wrapper .case-study-name a:hover {
	text-decoration: none;
}	
.case-study-wrapper .case-study-name.active a {
	opacity: 1;
	color: #fff;
}	
.case-study-images {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin:0;
	z-index:2;
}	
.case-study-images li {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}	
.case-study-images li .img-hero-background{
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position:center center;
	background-repeat:no-repeat;
	top: 0;
	left: 0;
	overflow: hidden;
	list-style:none;
	opacity: 0;
	-webkit-transform: translateY(-30px);
	transform: translateY(-30px);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .img-hero-background {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li .case-study-title{
	position: absolute;
	bottom: 30px;
	left: 30px;
	display: block;
	opacity: 0;
	color: #fff;
	z-index: 19;
	letter-spacing: 1px;
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	font-weight: 400;
	line-height: 16px;
	color: #fff; 
	font-style: italic;
	-webkit-transform: translateX(-100%);
	transform: translateX(-100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.case-study-images li.show .case-study-title {
	opacity: 1;
	-webkit-transform: translateX(0);
	transform: translateX(0);
} 
.case-study-images li .hero-number-back{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	display: block;
	list-style:none;
	opacity: 0;
	font-size: 18vw;
	font-family: 'Poppins', sans-serif;
	font-weight: 900;
	line-height: 1;
	color: rgba(255,255,255,.12);
	z-index: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number{
	position: absolute;
	bottom: 40px;
	left: 50%;
	width: 40px;
	margin-left: -70px;
	display: block;
	letter-spacing: 2px;
	text-align: center;
	list-style:none;
	opacity: 0;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.case-study-images li .hero-number-fixed{
	position: absolute;
	bottom: 40px;
	left: 50%;
	margin-left: 30px;
	width: 40px;
	text-align: center;
	display: block;
	letter-spacing: 2px;
	list-style:none;
	font-size: 13px;
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	line-height: 1;
	color: #fff;
	z-index: 6;
}
.case-study-images li .hero-number-fixed:before{
	position: absolute;
	content: '';
	top: 50%;
	left: -60px;
	width: 60px;
	height: 1px;
	z-index: 1;
	background-color: rgba(255,255,255,.4);
}
.case-study-images li.show .hero-number {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
} 
.case-study-images li.show .hero-number-back {
	opacity: 1;
} 
.dark-over-hero{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:5;
	background-color: #050505;
	opacity: 0.2;
}
.case-study-images li:nth-child(1) .img-hero-background{
	background-image: url("http://www.ivang-design.com/svg-load/1.jpg");
}
.case-study-images li:nth-child(2) .img-hero-background{
	background-image: url("http://www.ivang-design.com/svg-load/2.jpg");
}
.case-study-images li:nth-child(3) .img-hero-background{
	background-image: url("http://www.ivang-design.com/svg-load/3.jpg");
}
.case-study-images li:nth-child(4) .img-hero-background{
	background-image: url("http://www.ivang-design.com/svg-load/4.jpg");
}

/* #Media
================================================== */

@media (max-width: 991px) { 
	.case-study-images li .hero-number-back{
		font-size: 26vw;
	} 
}

@media (max-width: 767px) {	
	.case-study-wrapper .case-study-name a {
		font-size: 20px;
		letter-spacing: 1px;
	}
	.case-study-images li .hero-number-back{
		font-size: 32vw;
	} 
}

/* #Link to page
================================================== */

.link-to-portfolio {
	  position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20;
    cursor: pointer;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 3px;
    background-position: center center;
    background-size: cover;
    background-image: url('https://ivang-design.com/ig-logo.jpg');
    box-shadow: 0 0 0 2px rgba(255,255,255,.3);
    transition: opacity .2s, border-radius .2s, box-shadow .2s;
    transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
    opacity: 0.8;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255,255,255,0);
}


------JS------


(function ($) {"use strict";

  //Page cursors

  document.getElementsByTagName("body")[0].addEventListener("mousemove", function (n) {
    t.style.left = n.clientX + "px",
    t.style.top = n.clientY + "px",
    e.style.left = n.clientX + "px",
    e.style.top = n.clientY + "px",
    i.style.left = n.clientX + "px",
    i.style.top = n.clientY + "px";
  });
  var t = document.getElementById("cursor"),
  e = document.getElementById("cursor2"),
  i = document.getElementById("cursor3");
  function n(t) {
    e.classList.add("hover"), i.classList.add("hover");
  }
  function s(t) {
    e.classList.remove("hover"), i.classList.remove("hover");
  }
  s();
  for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {if (window.CP.shouldStopExecution(0)) break;
    o(r[a]);
  }window.CP.exitedLoop(0);
  function o(t) {
    t.addEventListener("mouseover", n), t.addEventListener("mouseout", s);
  }

  $(document).ready(function () {

    /* Hero Case study images */

    $('.case-study-name:nth-child(1)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(1)').addClass("show");
      $('.case-study-name:nth-child(1)').addClass('active');
    });
    $('.case-study-name:nth-child(2)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(2)').addClass("show");
      $('.case-study-name:nth-child(2)').addClass('active');
    });
    $('.case-study-name:nth-child(3)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(3)').addClass("show");
      $('.case-study-name:nth-child(3)').addClass('active');
    });
    $('.case-study-name:nth-child(4)').on('mouseenter', function () {
      $('.case-study-name.active').removeClass('active');
      $('.case-study-images li.show').removeClass("show");
      $('.case-study-images li:nth-child(4)').addClass("show");
      $('.case-study-name:nth-child(4)').addClass('active');
    });
    $('.case-study-name:nth-child(1)').trigger('mouseenter');

  });




})(jQuery);

11. By Pedro Castro

Made by Pedro Castro. Product Card Slider, Click the arrow button to change the card. Source

<div class="cd-slider">
      <ul>
        <li class="item current" style="background: #5AA0D8;">
          <div class="card" style="background: #3C96DE;">
            <!-- <img src="url"> -->
            <div class="img">
              <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="#FFFFFF" d="M18.21,16.157v-8.21c0-0.756-0.613-1.368-1.368-1.368h-1.368v1.368v1.368v6.841l-1.368,3.421h5.473L18.21,16.157z"></path>
                <path fill="#FFFFFF" d="M4.527,9.316V7.948V6.579H3.159c-0.756,0-1.368,0.613-1.368,1.368v8.21l-1.368,3.421h5.473l-1.368-3.421V9.316z"></path>
                <path fill="#FFFFFF" d="M14.766,5.895h0.023V5.21c0-2.644-2.145-4.788-4.789-4.788S5.211,2.566,5.211,5.21v0.685h0.023H14.766zM12.737,3.843c0.378,0,0.684,0.307,0.684,0.684s-0.306,0.684-0.684,0.684c-0.378,0-0.684-0.307-0.684-0.684S12.358,3.843,12.737,3.843z M10,1.448c0.755,0,1.368,0.613,1.368,1.368S10.755,4.185,10,4.185c-0.756,0-1.368-0.613-1.368-1.368S9.244,1.448,10,1.448z"></path>
                <path fill="#FFFFFF" d="M14.789,6.579H5.211v9.578l1.368,1.368h6.841l1.368-1.368V6.579z M12.052,12.052H7.948c-0.378,0-0.684-0.306-0.684-0.684c0-0.378,0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.306,0.684,0.684C12.737,11.746,12.431,12.052,12.052,12.052z M12.052,9.316H7.948c-0.378,0-0.684-0.307-0.684-0.684s0.306-0.684,0.684-0.684h4.105c0.378,0,0.684,0.307,0.684,0.684S12.431,9.316,12.052,9.316z"></path>
              </svg>
            </div>
            <div class="info">
            <h1>Title Card #1</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet dolorem aperiam eos beatae inventore ad non, sunt quo minima dolor. Voluptatibus quisquam, sunt officiis a reiciendis ex eaque doloremque consectetur?</p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </li>
        <li class="item" style="background: #E0DBD8;">
          <div class="card" style="background: #D6C8BF;">
            <!-- <img src="url"> -->
            <div class="img">
              <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="#FFFFFF" d="M16.853,8.355V5.888c0-3.015-2.467-5.482-5.482-5.482H8.629c-3.015,0-5.482,2.467-5.482,5.482v2.467l-2.741,7.127c0,1.371,4.295,4.112,9.594,4.112s9.594-2.741,9.594-4.112L16.853,8.355z M5.888,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C6.402,17.137,6.173,17.367,5.888,17.367z M5.203,10c0-0.377,0.19-0.928,0.423-1.225c0,0,0.651-0.831,1.976-0.831c0.672,0,1.141,0.309,1.141,0.309C9.057,8.46,9.315,8.938,9.315,9.315v1.028c0,0.188-0.308,0.343-0.685,0.343H5.888C5.511,10.685,5.203,10.377,5.203,10z M7.944,16.853H7.259v-1.371l0.685-0.685V16.853z M9.657,16.853H8.629v-2.741h1.028V16.853zM8.972,13.426v-1.028c0-0.568,0.46-1.028,1.028-1.028c0.568,0,1.028,0.46,1.028,1.028v1.028H8.972z M11.371,16.853h-1.028v-2.741h1.028V16.853z M12.741,16.853h-0.685v-2.056l0.685,0.685V16.853z M14.112,17.367c-0.284,0-0.514-0.23-0.514-0.514c0-0.284,0.23-0.514,0.514-0.514c0.284,0,0.514,0.23,0.514,0.514C14.626,17.137,14.396,17.367,14.112,17.367z M14.112,10.685h-2.741c-0.377,0-0.685-0.154-0.685-0.343V9.315c0-0.377,0.258-0.855,0.572-1.062c0,0,0.469-0.309,1.141-0.309c1.325,0,1.976,0.831,1.976,0.831c0.232,0.297,0.423,0.848,0.423,1.225S14.489,10.685,14.112,10.685z M18.347,15.801c-0.041,0.016-0.083,0.023-0.124,0.023c-0.137,0-0.267-0.083-0.319-0.218l-2.492-6.401c-0.659-1.647-1.474-2.289-2.905-2.289c-0.95,0-1.746,0.589-1.754,0.595c-0.422,0.317-1.084,0.316-1.507,0C9.239,7.505,8.435,6.916,7.492,6.916c-1.431,0-2.246,0.642-2.906,2.292l-2.491,6.398c-0.069,0.176-0.268,0.264-0.443,0.195c-0.176-0.068-0.264-0.267-0.195-0.444l2.492-6.401c0.765-1.911,1.824-2.726,3.543-2.726c1.176,0,2.125,0.702,2.165,0.731c0.179,0.135,0.506,0.135,0.685,0c0.04-0.029,0.99-0.731,2.165-0.731c1.719,0,2.779,0.814,3.542,2.723l2.493,6.404C18.611,15.534,18.524,15.733,18.347,15.801z"></path>
              </svg>
            </div>
            <div class="info">
            <h1>Title Card #2</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, magni, corporis perferendis sit libero ducimus fuga cupiditate officiis dolore deserunt at. Adipisci iste sint repellat eos optio, nulla doloremque vitae.</p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </li>
        <li class="item" style="background: #565656">
          <div class="card" style="background: #454545">
            <!-- <img src="url"> -->
            <div class="img">
              <svg class="svg-icon" viewBox="0 0 20 20">
                <path fill="#FFFFFF" d="M5.177,17.658c0,0,3.445,1.987,4.823,1.987c2.067,0,4.823-1.987,4.823-1.987c0.024-0.025,0.044-0.054,0.068-0.08H5.109C5.133,17.604,5.153,17.633,5.177,17.658z M8.622,1.583V0.531C6.496,0.973,2.539,2.521,1.376,7.933H0.699c-0.189,0-0.344,0.155-0.344,0.344v1.378C0.354,9.845,0.509,10,0.699,10h0.392c-0.016,0.224-0.026,0.454-0.033,0.689H0.699c-0.189,0-0.344,0.155-0.344,0.344v1.378c0,0.189,0.155,0.344,0.344,0.344h0.439c0.089,0.79,0.262,1.804,0.594,2.849v2.663H4.34c-2.233-2.449-2.264-6.822-2.264-7.01C2.077,4.052,6.353,2.108,8.622,1.583zM10.689,0.354H9.311v2.059h1.378V0.354z M11.378,2.63v0.472H8.622V2.63C6.612,3.147,3.11,4.951,3.11,11.258c0,0,0.004,3.373,1.47,5.632h4.042v-0.689h2.756v0.689h4.042c1.466-2.259,1.47-5.632,1.47-5.632C16.89,4.951,13.388,3.147,11.378,2.63z M5.005,12.035c-0.318-0.364-0.517-0.833-0.517-1.354S4.687,9.69,5.005,9.327V12.035zM6.383,10.026c-0.295,0.078-0.517,0.335-0.517,0.654c0,0.319,0.222,0.576,0.517,0.654v1.395c-0.384-0.032-0.738-0.163-1.033-0.377V9.008c0.296-0.214,0.649-0.345,1.033-0.377V10.026z M7.761,12.353c-0.296,0.214-0.649,0.345-1.033,0.377v-1.395C7.022,11.257,7.244,11,7.244,10.681c0-0.319-0.222-0.576-0.517-0.654V8.631c0.384,0.032,0.738,0.163,1.033,0.377V12.353zM8.105,12.035V9.327c0.318,0.363,0.517,0.833,0.517,1.354S8.423,11.671,8.105,12.035z M10,13.445l-1.378,0.689L10,12.756l1.378,1.378L10,13.445z M11.895,12.035c-0.318-0.364-0.517-0.833-0.517-1.354s0.199-0.991,0.517-1.354V12.035z M13.273,10.026c-0.295,0.078-0.517,0.335-0.517,0.654c0,0.319,0.222,0.576,0.517,0.654v1.395c-0.384-0.032-0.738-0.163-1.033-0.377V9.008c0.296-0.214,0.649-0.345,1.033-0.377V10.026z M14.651,12.353c-0.296,0.214-0.649,0.345-1.033,0.377v-1.395c0.295-0.078,0.517-0.335,0.517-0.654c0-0.319-0.222-0.576-0.517-0.654V8.631c0.384,0.032,0.738,0.163,1.033,0.377V12.353zM14.995,12.035V9.327c0.318,0.363,0.517,0.833,0.517,1.354S15.313,11.671,14.995,12.035z M19.646,9.656V8.278c0-0.189-0.155-0.344-0.344-0.344h-0.678c-1.163-5.413-5.12-6.96-7.246-7.402v1.052c2.269,0.525,6.545,2.469,6.545,9.675c0,0.188-0.031,4.561-2.264,7.01h2.608v-2.663c0.333-1.044,0.505-2.058,0.594-2.849h0.439c0.189,0,0.344-0.155,0.344-0.344v-1.378c0-0.189-0.155-0.344-0.344-0.344h-0.359c-0.007-0.235-0.017-0.465-0.033-0.689h0.392C19.491,10,19.646,9.845,19.646,9.656z"></path>
              </svg>
            </div>
            <div class="info">
            <h1>Title Card #3</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum enim cumque, dolore repellat quidem, qui eligendi ipsa mollitia, laborum quo animi eaque eius rem odit, quas eum. Praesentium, perferendis.</p>
              <a href="#">Buy Now</a>
            </div>
          </div>
        </li>
      </ul>
    
    <nav>
        <a href="#" class="prev">
          <svg viewBox="0 0 20 20">
            <path fill="#FFFFFF" stroke-width="0" d="M8.388,10.049l4.76-4.873c0.303-0.31,0.297-0.804-0.012-1.105c-0.309-0.304-0.803-0.293-1.105,0.012L6.726,9.516c-0.303,0.31-0.296,0.805,0.012,1.105l5.433,5.307c0.152,0.148,0.35,0.223,0.547,0.223c0.203,0,0.406-0.08,0.559-0.236c0.303-0.309,0.295-0.803-0.012-1.104L8.388,10.049z"></path>
          </svg>
        </a>
        <a href="#" class="next">
          <svg viewBox="0 0 20 20">
            <path fill="#FFFFFF" stroke-width="0" d="M11.611,10.049l-4.76-4.873c-0.303-0.31-0.297-0.804,0.012-1.105c0.309-0.304,0.803-0.293,1.105,0.012l5.306,5.433c0.304,0.31,0.296,0.805-0.012,1.105L7.83,15.928c-0.152,0.148-0.35,0.223-0.547,0.223c-0.203,0-0.406-0.08-0.559-0.236c-0.303-0.309-0.295-0.803,0.012-1.104L11.611,10.049z"></path>
          </svg>
        </a>
      </nav>

	</div>

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


-----CSS-----


@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
*, *::before, *::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
}
html {
	font-size: 10px;
}
html, body {
	width: 100%;
	height: 100%;
}
body {
	font-family: 'Lato', sans-serif;
}
.cd-slider {
	position: relative;
	width: 100%;
	height: 100%;
	height: 100vh;
	background: transparent;
	overflow: hidden;
}
.item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	list-style: none;
	-webkit-transform: translateX(100%);
	-moz-transform: translateX(100%);
	-ms-transform: translateX(100%);
	-o-transform: translateX(100%);
	transform: translateX(100%);
	-webkit-transition: -webkit-transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
	-moz-transition: -moz-transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
	-o-transition: -o-transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
	transition: transform 1s cubic-bezier(0.88, 0.01, 0.08, 0.99);
}
.card {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	max-width: 700px;
	width: 100%;
	border-radius: 5px;
	padding: 2%;
	box-shadow: 0 0 65px 2px rgba(0,0,0,.1);
}
.card img, .card .img {
	width: 40%;
	vertical-align: middle;
	display: inline-block;
}
.info {
	vertical-align: middle;
	display: inline-block;
	width: 59%;
	padding-left: 5%;
}
.info h1 {
	color: #fff;
	font-size: 3rem;
	margin-bottom: 3rem;
}
.info p {
	color: #fff;
	font-size: 1.6rem;
	margin-bottom: 40px;
}
.info a {
	display: inline-block;
	float: right;
	text-decoration: none;
	color: #000;
	background: #fff;
	font-size: 1.5rem;
	font-weight: 900;
	padding: 15px 30px;
	border-radius: 30px;
	text-transform: uppercase;
	word-spacing: 5px;
	letter-spacing: 2px;
	-webkit-transition: box-shadow .3s, opacity .6s 1s, -webkit-transform .6s 1s;
	-moz-transition: box-shadow .3s, opacity .6s 1s, -moz-transform .6s 1s;
	-o-transition: box-shadow .3s, opacity .6s 1s, -o-transform .6s 1s;
	transition: box-shadow .3s, opacity .6s 1s, transform .6s 1s;
}
.info a:hover {
	box-shadow: 10px 10px 30px 5px rgba(0,0,0,.1);
}
.prev, .next {
	position: absolute;
	top: 50%;
	left: 5%;
	width: 40px;
	height: 40px;
	margin-top: -20px;
}
.next {
	right: 5%;
	left: auto;
}
.hide-nav {
	visibility: hidden;
}
/* Transitions 
----------------------------------*/
.card img, .card .img, .info > * {
	opacity: 0;
	-webkit-transform: translateY(20%);
	-moz-transform: translateY(20%);
	-ms-transform: translateY(20%);
	-o-transform: translateY(20%);
	transform: translateY(20%);
	-webkit-transition: -webkit-transform .6s 1s, opacity .6s 1s;
	-moz-transition: -moz-transform .6s 1s, opacity .6s 1s;
	-o-transition: -o-transform .6s 1s, opacity .6s 1s;
	transition: transform .6s 1s, opacity .6s 1s;
}
.prev_slide {
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-ms-transform: translateX(-100%);
	-o-transform: translateX(-100%);
	transform: translateX(-100%);
}
.current {
	-webkit-transform: translateX(0);
	-moz-transform: translateX(0);
	-ms-transform: translateX(0);
	-o-transform: translateX(0);
	transform: translateX(0);
}
.current .card img, .current .card .img, .current .info > * {
	opacity: 1;
	-webkit-transform: translateY(0);
	-moz-transform: translateY(0);
	-ms-transform: translateY(0);
	-o-transform: translateY(0);
	transform: translateY(0);
}
@media screen and (max-width: 900px) {
	.card { max-width: 70%; }
}
@media screen and (max-width: 800px) {
	.card { text-align: center; }
	.info { padding-left: 0; }
	.info p { display: none; }
	.info a { float: none; }
}
@media screen and (max-width: 650px) {
	.card { padding: 4%; }
	.card img, .card .img { width: 60%; margin-bottom: 5%;}
	.info { width: 100%; }
	.prev { left: 3%; }
	.next { right: 3%; }
}
@media screen and (max-height: 450px) and (orientation: landscape) {
	.card img, .card .img { width: 40%; margin-bottom: 0; }
	.info { width: 59%; padding-left: 5%;}
}



------JS-------


$(function () {

  $(".prev").on('click', function (event) {
    event.preventDefault();
    prevSlide();
  });

  $(".next").on('click', function (event) {
    event.preventDefault();
    nextSlide();
  });

  if ($(".item").length <= 1) {
    $(".next").addClass('hide-nav');
  }

  $(".prev").addClass('hide-nav');

  function nextSlide() {
    var atual = $(".cd-slider").find('.current'),
    next = atual.next();

    next.addClass('current').removeClass('prev_slide').siblings().removeClass('current');
    next.prevAll().addClass('prev_slide');

    if (next.index() > 0) {
      $(".prev").removeClass('hide-nav');
    }
    if (next.index() == $(".item").last().index()) {
      $(".next").addClass('hide-nav');
    }
  }

  function prevSlide() {
    var atual = $(".cd-slider").find('.current'),
    prev = atual.prev();

    prev.addClass('current').removeClass('prev_slide').siblings().removeClass('current');

    if (prev.index() !== $(".item").last().index()) {
      $(".next").removeClass('hide-nav');
    }
    if (prev.index() == 0) {
      $(".prev").addClass('hide-nav');
    }
  }

});

12. By Muhammed Erdem

Made by Muhammed Erdem. Star Wars Imperial Army’s Product Slider! The product slider has multiple features, like you can select different version of the same product, select its size and add the product to the Wishlist. Source

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/css/swiper.min.css'>

<div class="wrapper">
  <div class="content">
    <div class="bg-shape">
      <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405214/starwars/logo.webp" alt="">
    </div>

    
    <div class="product-img">

      <div class="product-img__item" id="img1">
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-1.webp" alt="star wars" class="product-img__img">
      </div>

      <div class="product-img__item" id="img2">
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405217/starwars/item-2.webp" alt="star wars" class="product-img__img">
      </div>

      <div class="product-img__item" id="img3">
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405218/starwars/item-3.webp" alt="star wars" class="product-img__img">
      </div>

      <div class="product-img__item" id="img4">
        <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-4.webp" alt="star wars" class="product-img__img">
      </div>


    </div>



    <div class="product-slider">
      <button class="prev disabled">
        <span class="icon">
          <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-left"></use></svg>
        </span>
      </button>
      <button class="next">
        <span class="icon">
          <svg class="icon icon-arrow-right"><use xlink:href="#icon-arrow-right"></use></svg>
        </span>
      </button>

      <div class="product-slider__wrp swiper-wrapper">
        <div class="product-slider__item swiper-slide" data-target="img4">
          <div class="product-slider__card">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405223/starwars/item-4-bg.webp" alt="star wars" class="product-slider__cover">
            <div class="product-slider__content">
              <h1 class="product-slider__title">
                STORMTROPER <br>
                HELMET
              </h1>
              <span class="product-slider__price">$1.299,<sup>99</sup></span>
              <div class="product-ctr">
                <div class="product-labels">
                  <div class="product-labels__title">HELMET SIZE</div>

                  <div class="product-labels__group">
                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type5" >
                      <span class="product-labels__txt">S</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type5" checked>
                      <span class="product-labels__txt">M</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type5" >
                      <span class="product-labels__txt">L</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type5" >
                      <span class="product-labels__txt">XL</span>
                    </label>

                  </div>

                </div>

                <span class="hr-vertical"></span>

                <div class="product-inf">
                  <div class="product-inf__percent">
                    <div class="product-inf__percent-circle">
                      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                        <defs>
                          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
                            <stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
                          </linearGradient>
                        </defs>
                        <circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
                      </svg>
                    </div>
                    <div class="product-inf__percent-txt">
                      80%
                    </div>
                  </div>

                  <span class="product-inf__title">DURABILITY RATE</span>
                </div>

              </div>

              <div class="product-slider__bottom">
                <button class="product-slider__cart">
                  ADD TO CART
                </button>

                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
              </div>
            </div>
          </div>
        </div>
        <div class="product-slider__item swiper-slide" data-target="img1">
          <div class="product-slider__card">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405222/starwars/item-1-bg.webp" alt="star wars" class="product-slider__cover">
            <div class="product-slider__content">
              <h1 class="product-slider__title">
                IMPERIAL  ARMY’S <br> TIE FIGHTER
              </h1>
              <span class="product-slider__price">$9.999,<sup>99</sup></span>
              <div class="product-ctr">
                <div class="product-labels">
                  <div class="product-labels__title">ENGINE UNIT</div>

                  <div class="product-labels__group">
                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type1" checked>
                      <span class="product-labels__txt">P-S4 TWIN</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type1">
                      <span class="product-labels__txt">P-W401</span>
                    </label>
                  </div>

                </div>

                <span class="hr-vertical"></span>

                <div class="product-inf">
                  <div class="product-inf__percent">
                    <div class="product-inf__percent-circle">
                      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                        <defs>
                          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
                            <stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
                          </linearGradient>
                        </defs>
                        <circle cx="50" cy="50" r="47" stroke-dasharray="225, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
                      </svg>
                    </div>
                    <div class="product-inf__percent-txt">
                      75%
                    </div>
                  </div>

                  <span class="product-inf__title">DURABILITY</span>
                </div>

              </div>

              <div class="product-slider__bottom">
                <button class="product-slider__cart">
                  ADD TO CART
                </button>

                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
              </div>
            </div>
          </div>
        </div>

        <div class="product-slider__item swiper-slide" data-target="img2">
          <div class="product-slider__card">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405222/starwars/item-2-bg.webp" alt="star wars" class="product-slider__cover">
            <div class="product-slider__content">
              <h1 class="product-slider__title">
                KYLO REN'S <br> LIGHTSABER
              </h1>
              <span class="product-slider__price">$1.699,<sup>99</sup></span>
              <div class="product-ctr">
                <div class="product-labels">
                  <div class="product-labels__title">VOLTAGE RANGE</div>

                  <div class="product-labels__group">
                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type3" checked>
                      <span class="product-labels__txt">2000 <sup>WATT</sup></span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type3">
                      <span class="product-labels__txt">2800 <sup>WATT</sup></span>
                    </label>
                  </div>

                  <div class="product-labels__title">LASER SIZE</div>

                  <div class="product-labels__group">
                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type2" >
                      <span class="product-labels__txt">S</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type2" checked>
                      <span class="product-labels__txt">M</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type2" >
                      <span class="product-labels__txt">L</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type2" >
                      <span class="product-labels__txt">XL</span>
                    </label>

                  </div>

                </div>

                <span class="hr-vertical"></span>

                <div class="product-inf">
                  <div class="product-inf__percent">
                    <div class="product-inf__percent-circle">
                      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                        <defs>
                          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
                            <stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
                          </linearGradient>
                        </defs>
                        <circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
                      </svg>
                    </div>
                    <div class="product-inf__percent-txt">
                      80%
                    </div>
                  </div>

                  <span class="product-inf__title">DURABILITY</span>
                </div>

              </div>

              <div class="product-slider__bottom">
                <button class="product-slider__cart">
                  ADD TO CART
                </button>

                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
              </div>
            </div>
          </div>
        </div>

        <div class="product-slider__item swiper-slide" data-target="img3">
          <div class="product-slider__card">
            <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405215/starwars/item-3-bg.webp" alt="star wars" class="product-slider__cover">
            <div class="product-slider__content">
              <h1 class="product-slider__title">
                IMPERIAL ARMY'S <br>
                DEATH STAR
              </h1>
              <span class="product-slider__price">$9.999,<sup>99</sup></span>
              <div class="product-ctr">
                <div class="product-labels">
                  <div class="product-labels__title">HYPERDRIVE RATING</div>

                  <div class="product-labels__group">
                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type6" checked>
                      <span class="product-labels__txt">CLASS 4</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type6">
                      <span class="product-labels__txt">CLASS 20</span>
                    </label>
                  </div>

                  <div class="product-labels__title">ARMANENT</div>

                  <div class="product-labels__group">
                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type7" checked>
                      <span class="product-labels__txt">SUPERLASER</span>
                    </label>

                    <label class="product-labels__item">
                      <input type="radio" class="product-labels__checkbox" name="type7">
                      <span class="product-labels__txt">TURBOLASER</span>
                    </label>
                  </div>

                </div>

                <span class="hr-vertical"></span>

                <div class="product-inf">
                  <div class="product-inf__percent">
                    <div class="product-inf__percent-circle">
                      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
                        <defs>
                          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
                            <stop offset="0%" stop-color="#0c1e2c" stop-opacity="0" />
                            <stop offset="100%" stop-color="#cb2240" stop-opacity="1" />
                          </linearGradient>
                        </defs>
                        <circle cx="50" cy="50" r="47" stroke-dasharray="240, 300" stroke="#cb2240" stroke-width="4" fill="none"/>
                      </svg>
                    </div>
                    <div class="product-inf__percent-txt">
                      80%
                    </div>
                  </div>

                  <span class="product-inf__title">DURABILITY RATE</span>
                </div>

              </div>

              <div class="product-slider__bottom">
                <button class="product-slider__cart">
                  ADD TO CART
                </button>

                <button class="product-slider__fav js-fav"><span class="heart"></span> ADD TO WISHLIST</button>
              </div>
            </div>
          </div>
        </div>

        

      </div>
    </div>

  </div>

  <div class="social">
<a href="https://twitter.com/imuhammederdem" target="_blank" class="social__item">
      <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405220/starwars/twitter.webp" alt="muhammed erdem" class="social__img">
      <span class="social__txt">Coded By Muhammed Erdem</span>
    </a>

    <a href="https://dribbble.com/shots/3453028-Star-Wars-TIE-Fighter-UI" target="_blank" class="social__item">
      <img src="https://res.cloudinary.com/muhammederdem/image/upload/q_60/v1536405220/starwars/dribbble.webp" alt="eray yeşilyurt" class="social__img">
      <span class="social__txt">Designed By Eray Yeşilyurt</span>
    </a>

  </div>

</div>
<svg class="hidden" hidden>
  <symbol id="icon-arrow-left" viewBox="0 0 32 32">
    <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
  </symbol>
  <symbol id="icon-arrow-right" viewBox="0 0 32 32">
    <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
  </symbol>
</svg>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.5/js/swiper.min.js'></script>




-------CSS--------



@import url("https://fonts.googleapis.com/css?family=Dosis:400,600,700,800");
@font-face {
  font-family: "Uni Sans";
  src: url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168547/unisans-font/UniSansHeavyCAPS.woff2") format("woff2"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168547/unisans-font/UniSansHeavyCAPS.woff") format("woff"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168548/unisans-font/UniSansHeavyCAPS.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: "Uni Sans";
  src: url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168545/unisans-font/UniSansThinCAPS.woff2") format("woff2"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168545/unisans-font/UniSansThinCAPS.woff") format("woff"), url("https://res.cloudinary.com/muhammederdem/raw/upload/v1536168548/unisans-font/UniSansThinCAPS.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
body {
  font-family: "Uni Sans", sans-serif;
  font-weight: 500;
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a {
  text-decoration: none;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.wrapper {
  width: 100%;
  height: 100vh;
  min-height: 750px;
  background: url(https://res.cloudinary.com/muhammederdem/image/upload/v1536405234/starwars/death_star.jpg) center no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  display: flex;
}
@media screen and (max-width: 992px) {
  .wrapper {
    height: auto;
    min-height: 100vh;
  }
}

.content {
  height: 600px;
  margin: auto;
  width: 100%;
  max-width: 1050px;
  display: flex;
  align-items: center;
  position: relative;
}
@media screen and (max-width: 1200px) {
  .content {
    max-width: 920px;
  }
}
@media screen and (max-width: 992px) {
  .content {
    max-width: 920px;
    margin-top: 100px;
    height: auto;
    min-height: 100vh;
  }
}
@media screen and (max-width: 767px) {
  .content {
    margin-top: 20px;
  }
}
@media screen and (max-width: 576px) {
  .content {
    margin-top: 20px;
    margin-bottom: 20px;
  }
}

.bg-shape {
  height: 100%;
  background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
  box-shadow: 0px 30px 139px 0px rgba(10, 22, 31, 0.26);
  border-radius: 30px;
  padding: 45px 40px;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1200px) {
  .bg-shape {
    width: 45%;
  }
}
@media screen and (max-width: 992px) {
  .bg-shape {
    width: 90%;
    height: 290px;
    align-items: flex-start;
    padding: 50px;
    left: 50%;
    transform: translateX(-50%);
  }
}
@media screen and (max-width: 767px) {
  .bg-shape {
    padding: 30px;
    width: 95%;
    border-radius: 20px;
  }
}
@media screen and (max-width: 576px) {
  .bg-shape {
    height: 200px;
    padding: 30px;
  }
}
.bg-shape img {
  object-fit: contain;
  width: 510px;
  display: block;
  object-position: left center;
  opacity: 0.2;
  transform: rotate(-90deg) translateY(-50%);
  max-width: inherit;
  left: 10px;
  position: absolute;
}
@media screen and (max-width: 1200px) {
  .bg-shape img {
    width: 430px;
    left: 10px;
  }
}
@media screen and (max-width: 992px) {
  .bg-shape img {
    transform: none;
    width: 100%;
    position: relative;
    left: auto;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    height: 100%;
    object-position: top center;
  }
}

.next, .prev {
  z-index: 22;
  display: inline-flex;
  border: none;
  width: 61px;
  height: 61px;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  position: absolute;
  top: 50%;
  outline: none;
  cursor: pointer;
}
.next.disabled, .prev.disabled {
  cursor: not-allowed;
}
.next:focus, .prev:focus {
  outline: none;
}
@media screen and (max-width: 992px) {
  .next, .prev {
    top: 170px;
  }
}

.prev {
  left: -30%;
  transform: translate(-100%, -50%);
}
@media screen and (max-width: 1200px) {
  .prev {
    left: -21%;
  }
}
@media screen and (max-width: 992px) {
  .prev {
    left: 0;
    transform: translate(-50%, -50%);
  }
}
@media screen and (max-width: 576px) {
  .prev {
    transform: translate(20%, -50%);
  }
}

.next {
  right: 0;
  transform: translate(50%, -50%);
}
@media screen and (max-width: 576px) {
  .next {
    transform: translate(-20%, -50%);
  }
}

.product-slider {
  width: 75%;
  height: 85%;
  border-radius: 30px;
  box-shadow: 0 28px 79px 0 rgba(10, 22, 31, 0.35);
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 1200px) {
  .product-slider {
    width: 80%;
  }
}
@media screen and (max-width: 992px) {
  .product-slider {
    width: 80%;
    left: 50%;
    transform: translateX(-50%);
    height: auto;
    position: relative;
    top: 0;
    margin-top: 170px;
    margin-bottom: 100px;
  }
  .product-slider br {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .product-slider {
    border-radius: 20px;
  }
}
@media screen and (max-width: 576px) {
  .product-slider {
    width: 85%;
    margin-top: 130px;
  }
}
.product-slider__wrp {
  height: 100%;
}
.product-slider__item {
  position: relative;
  height: 100%;
  width: 100%;
}
@media screen and (max-width: 992px) {
  .product-slider__item {
    height: auto;
  }
}
.product-slider__item.swiper-slide-active .product-slider__content > * {
  opacity: 1;
  transform: none;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(1) {
  transition-delay: 0s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(2) {
  transition-delay: 0.2s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(3) {
  transition-delay: 0.4s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(4) {
  transition-delay: 0.6s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(5) {
  transition-delay: 0.8s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(6) {
  transition-delay: 1s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(7) {
  transition-delay: 1.2s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(8) {
  transition-delay: 1.4s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(9) {
  transition-delay: 1.6s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(10) {
  transition-delay: 1.8s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(11) {
  transition-delay: 2s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(12) {
  transition-delay: 2.2s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(13) {
  transition-delay: 2.4s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(14) {
  transition-delay: 2.6s;
}
.product-slider__item.swiper-slide-active .product-slider__content > *:nth-child(15) {
  transition-delay: 2.8s;
}
.product-slider__item.swiper-slide-active circle {
  animation: progress 1s ease-out forwards;
  animation-delay: 0.5s;
  opacity: 0.75;
}
.product-slider__card {
  height: 100%;
  display: flex;
  align-items: center;
  width: 100%;
  transition: all 0.5s;
  overflow: hidden;
  position: relative;
  border-radius: 30px;
}
@media screen and (max-width: 992px) {
  .product-slider__card {
    align-items: flex-start;
  }
}
@media screen and (max-width: 767px) {
  .product-slider__card {
    border-radius: 20px;
  }
}
.product-slider__cover {
  border-radius: 30px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@media screen and (max-width: 767px) {
  .product-slider__cover {
    border-radius: 20px;
  }
}
.product-slider__content {
  color: #fff;
  padding-top: 1px;
  position: relative;
  z-index: 2;
  width: 100%;
  padding-left: 250px;
  padding-right: 80px;
}
@media screen and (max-width: 1200px) {
  .product-slider__content {
    padding-left: 220px;
  }
}
@media screen and (max-width: 992px) {
  .product-slider__content {
    padding: 20px 60px 100px;
    padding-top: 280px;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .product-slider__content {
    padding: 20px 30px 50px;
    padding-top: 300px;
  }
}
@media screen and (max-width: 576px) {
  .product-slider__content {
    padding-top: 220px;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.product-slider__title {
  margin: 0;
  margin-bottom: 10px;
  font-weight: 900;
  font-size: 41px;
  line-height: 1.2em;
  letter-spacing: 2px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
}
@media screen and (max-width: 1200px) {
  .product-slider__title {
    font-size: 34px;
  }
}
@media screen and (max-width: 576px) {
  .product-slider__title {
    font-size: 24px;
  }
}
.product-slider__price {
  display: block;
  font-size: 42px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
}
@media screen and (max-width: 1200px) {
  .product-slider__price {
    font-size: 36px;
  }
}
@media screen and (max-width: 576px) {
  .product-slider__price {
    font-size: 30px;
  }
}
.product-slider__price sup {
  top: -20px;
  font-size: 65%;
}
.product-slider__cart {
  box-shadow: 0 7px 99px 0 rgba(204, 51, 66, 0.6);
  background-image: linear-gradient(-45deg, #cc3843 0%, #cb193f 100%);
  border: none;
  color: #fff;
  padding: 10px 30px;
  border-radius: 50px;
  min-height: 50px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  margin-right: 40px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .product-slider__cart {
    margin-right: 30px;
  }
}
@media screen and (max-width: 576px) {
  .product-slider__cart {
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }
}
.product-slider__fav {
  color: #888e94;
  background: none;
  border: none;
  position: relative;
  padding-left: 25px;
  outline: none;
  cursor: pointer;
}
.product-slider__fav:focus {
  outline: none;
}
.product-slider__fav .heart {
  display: block;
  position: absolute;
  left: 0;
  transform: translate(-50%, -50%) scale(0.7);
  top: 50%;
  pointer-events: none;
  width: 100px;
  height: 100px;
  background: url("https://res.cloudinary.com/muhammederdem/image/upload/v1536405215/starwars/heart.png") no-repeat;
  background-position: 0 0;
  cursor: pointer;
  transition: background-position 1s steps(28);
  transition-duration: 0s;
}
.product-slider__fav .heart.is-active {
  transition-duration: 1s;
  background-position: -2800px 0;
}
.product-slider__bottom {
  margin-top: 20px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
}
.product-ctr {
  display: flex;
  align-items: center;
  min-height: 150px;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(55px);
  transition: all 0.5s;
}
@media screen and (max-width: 992px) {
  .product-ctr {
    justify-content: center;
  }
}
.product-ctr .hr-vertical {
  width: 1px;
  background: #9fa3a7;
  align-self: stretch;
  margin: 0 35px;
  flex-shrink: 0;
  opacity: 0.5;
}
@media screen and (max-width: 767px) {
  .product-ctr {
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 40px;
  }
  .product-ctr .hr-vertical {
    width: 100%;
    margin: 35px 0;
    height: 1px;
  }
}
@media screen and (max-width: 767px) {
  .product-labels {
    width: 100%;
  }
}
.product-labels__checkbox {
  display: none;
}
.product-labels__checkbox:checked + .product-labels__txt {
  border-color: #cc3743;
  padding: 10px 13px;
}
.product-labels__title {
  font-family: "Dosis", sans-serif;
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 16px;
  margin-bottom: 10px;
}
.product-labels__group {
  display: flex;
  margin-bottom: 15px;
}
@media screen and (max-width: 992px) {
  .product-labels__group {
    justify-content: center;
  }
}
.product-labels__group:last-child {
  margin-bottom: 0;
}
.product-labels__item {
  margin: 5px;
  cursor: pointer;
}
.product-labels__item:first-child {
  margin-left: 0;
}
.product-labels__txt {
  display: block;
  border: 2px solid transparent;
  font-size: 14px;
  padding: 10px 20px;
  padding-left: 0;
  border-radius: 50px;
  transition: all 0.3s;
  letter-spacing: 2px;
}
@keyframes progress {
  0% {
    stroke-dasharray: 0 100;
  }
}
.product-inf {
  text-align: center;
}
@media screen and (max-width: 767px) {
  .product-inf {
    width: 100%;
  }
}
.product-inf__percent {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 12px;
  font-family: "Dosis", sans-serif;
  position: relative;
}
.product-inf__percent circle {
  transform: rotate(180deg) scaleY(-1);
  transform-origin: 50%;
}
.product-inf__percent-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.product-inf__title {
  font-family: "Dosis", sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 18px;
}
.product-img {
  position: absolute;
  z-index: 2;
  width: 500px;
  left: 25%;
  transform: translateX(-45%);
  max-height: 500px;
  height: 100%;
  pointer-events: none;
}
@media screen and (max-width: 1200px) {
  .product-img {
    width: 430px;
    left: 20%;
  }
}
@media screen and (max-width: 992px) {
  .product-img {
    width: 430px;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    height: 350px;
  }
}
@media screen and (max-width: 767px) {
  .product-img {
    width: 100%;
    max-width: 400px;
    top: 30px;
    height: 390px;
  }
}
@media screen and (max-width: 576px) {
  .product-img {
    max-width: 300px;
    height: 300px;
  }
}
.product-img__item {
  display: flex;
  align-items: center;
  position: absolute;
  pointer-events: none;
  user-select: none;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(-130px);
  opacity: 0;
  transition: all 0.3s;
}
.product-img__item.active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  transition-delay: 0.3s;
}
.product-img__item img {
  object-fit: contain;
  object-position: center right;
}

.social {
  position: absolute;
  bottom: 10px;
  right: 0;
  width: 100%;
  display: flex;
  padding: 20px 55px;
  justify-content: space-between;
}
@media screen and (max-width: 576px) {
  .social {
    flex-direction: column;
    bottom: 0;
  }
}
.social__item {
  color: rgba(255, 255, 255, 0.75);
  font-family: "Dosis", sans-serif;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1em;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}
.social__item:hover {
  color: #fff;
}
@media screen and (max-width: 576px) {
  .social__item {
    margin-bottom: 10px;
  }
}
.social__img {
  width: 24px;
  margin-right: 15px;
}



-------JS--------


var swiper = new Swiper('.product-slider', {
  spaceBetween: 30,
  effect: 'fade',
  // initialSlide: 2,
  loop: false,
  navigation: {
    nextEl: '.next',
    prevEl: '.prev' },

  // mousewheel: {
  //     // invert: false
  // },
  on: {
    init: function () {
      var index = this.activeIndex;

      var target = $('.product-slider__item').eq(index).data('target');

      console.log(target);

      $('.product-img__item').removeClass('active');
      $('.product-img__item#' + target).addClass('active');
    } } });




swiper.on('slideChange', function () {
  var index = this.activeIndex;

  var target = $('.product-slider__item').eq(index).data('target');

  console.log(target);

  $('.product-img__item').removeClass('active');
  $('.product-img__item#' + target).addClass('active');

  if (swiper.isEnd) {
    $('.prev').removeClass('disabled');
    $('.next').addClass('disabled');
  } else {
    $('.next').removeClass('disabled');
  }

  if (swiper.isBeginning) {
    $('.prev').addClass('disabled');
  } else {
    $('.prev').removeClass('disabled');
  }
});

$(".js-fav").on("click", function () {
  $(this).find('.heart').toggleClass("is-active");
});

13. By Amy

Made by Amy. Arrow Slider, Hovering your mouse at the right side will display the content of the left side and hovering your mouse at the left side will display the content at the right side. Source

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css'>

<div class="arrow-slider">
	<div class="wrapper mobile-carousel">
		<div class="left" style="background-image: url(http://via.placeholder.com/1300x700/2f599e/ffffff?text=X)">
			<div class="color-overlay"></div>			
			<div class="mobile-image">
				<img src="http://via.placeholder.com/1300x700/2f599e/ffffff?text=X" alt="" />
			</div>
			<div class="content-wrap">
				<div class="content">
					<h2>Lorem ipsum dolor sit amet consectetuer</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
				</div>
			</div>
			<div class="button-wrap">
				<a href="#">Button</a>
			</div>
		</div>
		<div class="right" style="background-image: url(http://via.placeholder.com/1300x700/c10764/ffffff?text=X)">
			<div class="color-overlay"></div>			
			<div class="mobile-image">
				<img src="http://via.placeholder.com/1300x700/c10764/ffffff?text=X" alt="" />
			</div>

			<div class="content-wrap">
				<div class="content">
					<h2>Lorem ipsum dolor sit amet consectetuer</h2>
					<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
					
				</div>
			</div>
			
			<div class="button-wrap">
				<a href="#">Button</a>
			</div>
		</div>
	</div>
	<div class="mobile-arrows"></div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>




------CSS-------



html {
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
}
h2 {
  font-size: 2rem;
  line-height: 2.25rem;
  padding: 0;
  margin: 0;
}
.arrow-slider {
  width: 100%;
}
@media (max-width: 767px) {
  .arrow-slider {
    margin: 15px auto;
    position: relative;
  }
  .arrow-slider .mobile-carousel {
    margin: 0 15px;
  }
  .arrow-slider .mobile-arrows {
    display: block;
    position: absolute;
    top: 0;
    z-index: 5;
    width: 100%;
    height: auto;
    -webkit-transition: height 1s ease;
    transition: height 1s ease;
  }
  .arrow-slider .mobile-arrows .slick-next {
    right: 30px;
    left: auto;
  }
  .arrow-slider .mobile-arrows .slick-prev {
    left: 30px;
    right: auto;
  }
  .arrow-slider .left,
  .arrow-slider .right {
    display: block;
    position: relative;
    background-image: none !important;
  }
  .arrow-slider .left .mobile-image,
  .arrow-slider .right .mobile-image {
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
  }
  .arrow-slider .left .mobile-image img,
  .arrow-slider .right .mobile-image img {
    max-width: 100%;
    height: auto;
  }
  .arrow-slider .left .color-overlay,
  .arrow-slider .right .color-overlay {
    display: none;
  }
  .arrow-slider .left .content,
  .arrow-slider .right .content {
    margin-top: 10px;
    padding: 15px 15px 0 15px;
    text-align: center;
  }
  .arrow-slider .left .button-wrap,
  .arrow-slider .right .button-wrap {
    padding: 15px;
    text-align: center;
  }
}
@media (min-width: 768px) {
  .arrow-slider {
    margin-bottom: -3px;
  }
  .arrow-slider .mobile-arrows,
  .arrow-slider .mobile-image {
    display: none;
  }
  .arrow-slider .wrapper {
    position: relative;
    height: 52.08333333vw;
    max-height: 700px;
    overflow: hidden;
  }
  .arrow-slider .left,
  .arrow-slider .right {
    cursor: pointer;
    background-size: 100vw;
    bottom: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transition: all 1s ease;
    width: 50%;
    background-repeat: no-repeat;
  }
  .arrow-slider .left .color-overlay,
  .arrow-slider .right .color-overlay {
    background-color: white;
    opacity: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 1s ease, background-color 1s ease;
    z-index: 1;
  }
  .arrow-slider .left .content-wrap,
  .arrow-slider .right .content-wrap,
  .arrow-slider .left .button-wrap,
  .arrow-slider .right .button-wrap {
    opacity: 0;
    height: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }
  .arrow-slider .left .button-wrap,
  .arrow-slider .right .button-wrap {
    width: auto;
    transition: opacity 0.5s ease;
  }
  .arrow-slider .left .content-wrap,
  .arrow-slider .right .content-wrap {
    width: 0;
    transition: opacity 1s ease;
  }
  .arrow-slider .left .content,
  .arrow-slider .right .content {
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    top: 50%;
    width: auto;
    max-width: 370px;
  }
  .arrow-slider .left {
    background-position: left center;
    left: 0;
    z-index: 1;
  }
  .arrow-slider .left .content-wrap {
    left: 8%;
  }
  .arrow-slider .left .button-wrap {
    left: 30%;
  }
  .arrow-slider .right {
    background-position: right center;
    right: 0;
    z-index: 2;
    clip-path: polygon(0 0, 0 50%, 0 100%, 100% 100%, 100% 0);
  }
  .arrow-slider .right .content-wrap {
    right: 75%;
  }
  .arrow-slider .right .button-wrap {
    left: 50%;
  }
  .arrow-slider.left-focused .right {
    width: 55%;
    -webkit-clip-path: polygon(0 0, 80px 50%, 0 100%, 100% 100%, 100% 0);
    clip-path: polygon(0 0, 80px 50%, 0 100%, 100% 100%, 100% 0);
  }
  .arrow-slider.left-focused .right .color-overlay,
  .arrow-slider.left-focused .right .content-wrap {
    opacity: 1;
  }
  .arrow-slider.left-focused .left {
    z-index: 1;
    width: 70%;
  }
  .arrow-slider.left-focused .left .button-wrap {
    opacity: 1;
  }
  .arrow-slider.right-focused .right {
    width: 62.5%;
    -webkit-clip-path: polygon(80px 0, 0 50%, 80px 100%, 100% 100%, 100% 0);
    clip-path: polygon(80px 0, 0 50%, 80px 100%, 100% 100%, 100% 0);
  }
  .arrow-slider.right-focused .right .button-wrap {
    opacity: 1;
  }
  .arrow-slider.right-focused .left {
    width: 45%;
  }
  .arrow-slider.right-focused .left .color-overlay,
  .arrow-slider.right-focused .left .content-wrap {
    opacity: 1;
  }
}



------JS------


//Set up the arrow slider functionality depending on if its mobile or desktop sizing
function arrowSliderSetup() {

  // Mobile carousel
  if ($(window).outerWidth() < 768) {

    // Set the height of the mobile arrow class to match the height of the image slide so we can vertially center it
    $('.mobile-arrows').css('height', $('.mobile-image').outerHeight());

    //Init the carousel if it already has not been initialized
    if (!$('.mobile-carousel').hasClass('slick-initialized')) {
      $('.mobile-carousel').slick({
        dots: true,
        draggable: true,
        infinite: true,
        speed: 300,
        adaptiveHeight: false,
        arrows: true,
        appendArrows: $('.mobile-arrows') });

    }

    // Remove desktop class
    if ($('.arrow-slider').hasClass('desktop-view')) {
      $('.arrow-slider').removeClass('desktop-view');
    }

    // Desktop slider
  } else {
    // If the user resizes their screen from mobile to desktop, destroy the mobile carousel
    if ($('.mobile-carousel').hasClass('slick-initialized')) {
      $('.mobile-carousel').slick('unslick');
    }

    // Set up the arrow hover actions for desktop, just once
    if (!$('.arrow-slider').hasClass('desktop-view')) {
      arrowSliderDesktop();
    }

    $('.arrow-slider').addClass('desktop-view');
  }
}

function arrowSliderDesktop() {
  const slider = $('.arrow-slider');
  const sliderLeft = $('.arrow-slider .left');
  const sliderRight = $('.arrow-slider .right');

  // Mouse-listeners for the left and right sides of the slider
  sliderLeft.mouseenter(function () {
    slider.addClass('left-focused');
  }).mouseleave(function () {
    slider.removeClass('left-focused');
  });

  sliderRight.mouseenter(function () {
    slider.addClass('right-focused');
  }).mouseleave(function () {
    slider.removeClass('right-focused');
  });
}


$(document).ready(function () {

  // Set up the arrow slider functionality depending on if its mobile or desktop sizing
  arrowSliderSetup();

  // On window resize, set up the arrow slider functionality depending on if its mobile or desktop sizing
  $(window).resize(function () {
    arrowSliderSetup();
  });

});
//# sourceURL=pen.js

14. By Andy Tran

Made by Andy Tran. Informational Card Slider, Clicking on the Next or Prev button changes the card. Source

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons'>
<div class="card">
  <div class="products">
    <div class="product active" product-id="1" product-color="#D18B49">
      <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Stag.svg"/></div>
      <h1 class="title">The Magnificent Stag</h1>
      <p class="description">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="product" product-id="2" product-color="#542F13">
      <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Bear.svg"/></div>
      <h1 class="title">The Courageous Bear</h1>
      <p class="description">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="product" product-id="3" product-color="#A5AAAE">
      <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Mouse.svg"/></div>
      <h1 class="title">The Sneaky Mouse</h1>
      <p class="description">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="product" product-id="4" product-color="#ED8D1F">
      <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Fox.svg"/></div>
      <h1 class="title">The Cunning Fox</h1>
      <p class="description">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
    <div class="product" product-id="5" product-color="#C4C8CB">
      <div class="thumbnail"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/169963/Rabbit.svg"/></div>
      <h1 class="title">The Jumpy Rabbit</h1>
      <p class="description">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>
  </div>
  <div class="footer"><a class="btn" id="prev" href="#" ripple="" ripple-color="#666666">Prev</a><a class="btn" id="next" href="#" ripple="" ripple-color="#666666">Next</a></div>
</div>

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



-------CSS--------



/* $base-background: #00CC99; */
body {
  background: #D18B49;
  color: rgba(0, 0, 0, 0.6);
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  line-height: 1.6em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: 0.5s ease;
}

.btn {
  border-radius: 2px;
  padding: 8px 12px;
  color: #D18B49;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.5s ease;
}

.card {
  background: #FFFFFF;
  max-width: 400px;
  margin: 100px auto;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  padding: 48px;
  text-align: center;
}

.products {
  position: relative;
  overflow: hidden;
  transition: 0.5s ease;
}

.product {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: 0.5s ease;
}
.product.active {
  opacity: 1;
  visibility: visible;
}

.thumbnail {
  margin: 0 0 48px;
}

.title {
  margin: 0 0 12px;
  color: #D18B49;
  font-size: 24px;
  transition: 0.5s ease;
}

.description {
  margin: 0 0 48px;
}

.footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0 -12px -12px;
}

[ripple] {
  z-index: 1;
  position: relative;
  overflow: hidden;
}
[ripple] .ripple {
  position: absolute;
  background: #FFFFFF;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  transform: scale(0);
  -webkit-animation: ripple 2s;
          animation: ripple 2s;
}

@-webkit-keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.2;
  }
  100% {
    transform: scale(20);
    opacity: 0;
  }
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.2;
  }
  100% {
    transform: scale(20);
    opacity: 0;
  }
}




------JS-------



$(document).ready(function () {
  var getProductHeight = $('.product.active').height();

  $('.products').css({
    height: getProductHeight });


  function calcProductHeight() {
    getProductHeight = $('.product.active').height();

    $('.products').css({
      height: getProductHeight });

  }

  function animateContentColor() {
    var getProductColor = $('.product.active').attr('product-color');

    $('body').css({
      background: getProductColor });


    $('.title').css({
      color: getProductColor });


    $('.btn').css({
      color: getProductColor });

  }

  var productItem = $('.product'),
  productCurrentItem = productItem.filter('.active');

  $('#next').on('click', function (e) {
    e.preventDefault();

    var nextItem = productCurrentItem.next();

    productCurrentItem.removeClass('active');

    if (nextItem.length) {

      productCurrentItem = nextItem.addClass('active');
    } else {
      productCurrentItem = productItem.first().addClass('active');
    }

    calcProductHeight();
    animateContentColor();
  });

  $('#prev').on('click', function (e) {
    e.preventDefault();

    var prevItem = productCurrentItem.prev();

    productCurrentItem.removeClass('active');

    if (prevItem.length) {
      productCurrentItem = prevItem.addClass('active');
    } else {
      productCurrentItem = productItem.last().addClass('active');
    }

    calcProductHeight();
    animateContentColor();
  });

  // Ripple
  $('[ripple]').on('click', function (e) {
    var rippleDiv = $('<div class="ripple" />'),
    rippleSize = 60,
    rippleOffset = $(this).offset(),
    rippleY = e.pageY - rippleOffset.top,
    rippleX = e.pageX - rippleOffset.left,
    ripple = $('.ripple');

    rippleDiv.css({
      top: rippleY - rippleSize / 2,
      left: rippleX - rippleSize / 2,
      background: $(this).attr("ripple-color") }).
    appendTo($(this));

    window.setTimeout(function () {
      rippleDiv.remove();
    }, 1900);
  });
});
//# sourceURL=pen.js

15. By Russ Perry

Made by Russ Perry. Custom Image Slider Carousel with Line Arrows, clicking the three lines changes the image. Source

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css'>

<div class="container">
  <h1>Custom Image Carousel with Line Arrows</h1>
  <div class="image">
    <p class="description"></p>
    <div class="arrow left-arrow">
      <div class="short"></div>
      <div class="med"></div>
      <div class="long"></div>
    </div>
    <div class="arrow right-arrow">
      <div class="short"></div>
      <div class="med"></div>
      <div class="long"></div>
    </div>
  </div>
</div>

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



-------CSS--------


@import url("https://fonts.googleapis.com/css?family=Montserrat&display=swap");
* {
  font-family: "Montserrat", arial, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #eff1f3;
}

.container {
  width: 95%;
  height: 100vh;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.container h1 {
  margin-bottom: 50px;
}
.container .image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 320px;
  width: 480px;
  position: relative;
  border-radius: 4px;
}
.container .image .description {
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: #eff1f3;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.container .image .arrow {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 75px;
  width: 40px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.container .image .arrow * {
  width: 5px;
  background: #696773;
  border-radius: 4px;
  transition: all 200ms ease-in-out;
}
.container .image .arrow .short {
  height: 25px;
}
.container .image .arrow .med {
  height: 50px;
}
.container .image .arrow .long {
  height: 75px;
}
.container .image .left-arrow {
  left: -50px;
}
.container .image .right-arrow {
  right: -50px;
  flex-direction: row-reverse;
}
.container .image .arrow:hover * {
  background-color: #009FB7;
  cursor: pointer;
}
.container .image .arrow:active * {
  transform: translateY(2px);
}


-------JS--------


const images = [
['https://images.unsplash.com/photo-1549611016-3a70d82b5040?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1316&q=80', 'Farmer Burger - <em>The Artisian Bistro</em>'],

['https://images.unsplash.com/photo-1504754524776-8f4f37790ca0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', 'Family Breakfast - <em>AM Diner</em>'],

['https://images.unsplash.com/photo-1506354666786-959d6d497f1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', 'Garden Pizza - <em>The Pizzataliano</em>'],

['https://images.unsplash.com/photo-1496116218417-1a781b1c416c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', 'Dim Sum - <em>Asian Fusion</em>']];

let imageCounter = 0;

setContent();

$('.left-arrow').on('click', function () {
  if (imageCounter === 0) {
    imageCounter = images.length - 1;
  } else {
    imageCounter--;
  }
  setContent();
});

$('.right-arrow').on('click', function () {
  if (imageCounter === images.length - 1) {
    imageCounter = 0;
  } else {
    imageCounter++;
  }
  setContent();
});

function setContent() {
  $('.image').css('background-image', `url(${images[imageCounter][0]})`);
  $('.description').html(images[imageCounter][1]);
}

16. By Coded Writer

Made by Coded Writer. A simple image slider. Source

<!--Coded Writer βš”οΈ-->
<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
 <script src="https://kit.fontawesome.com/b29e93a16f.js" crossorigin="anonymous"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <h1>Image Carousel</h1>
        <div class="img-container">
          <span><i class="fas fa-chevron-circle-left icons" id="icon-left"></i></span>
        <img id="images" src="https://images.unsplash.com/photo-1520637102912-2df6bb2aec6d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8d2F0ZXJmYWxsfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Waterfall">
      
          <span><i class="fas fa-chevron-circle-right icons" id=icon-right></i></span>
    
    </div>
      <div class="small-circles">
       <div class="circles"></div>
       <div class="circles"></div>
       <div class="circles"></div>
         </div>
         
         <footer>
         <div class="name-section">
             <p class="code-name"> By Coded Writer βš”οΈ</p>
         </footer>
         </div>
    </body>
</html>


------CSS------


@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');

body {
    box-sizing:border-box;
    margin:0;
    background-color:#000;
    font-family: 'Reem Kufi', sans-serif;
}

h1{
    text-align:center;
    color:white;
}

.img-container{
    display:flex;
    align-items:center;
    justify-content:center;
    height:50vh;
}

#images{
    height:50vh;
    width:75%;
    border-radius:5px;
}

.icons{
    position:relative;
    font-size:2em;
    color:#ccc; 
    opacity:0.4;
    margin:3px
}

.icons:hover{
    opacity:1;
    padding-top:5px;
}

.small-circles{
     display:flex;
    align-items: center;
    justify-content:center;
    height:10vh;
}

.circles{
    width:10px;
    height:10px;
    border-radius:50%;
    border:1px solid #1a77d3;
    z-index:2;
    margin:2px; 
}

.inactive{
    background-color:transparent;
}

.active{
    background-color:#1a77d3;
}

.name-section{
    width:100%;
    height:10vh;
    background-color:inherit;
    position:absolute;
    bottom:0;
    border-top:1px solid #1a77d3;
}

.code-name{
    position:relative ;
    text-align:center;
    font-size:1.1em;
    color:white;
    bottom:6px;
}



------JS-------


$(function(){ //Making sure the body content is loaded before the jQuery Code is run

//Declaring and assigning values to variables
var slideShow = ["https://images.unsplash.com/photo-1520637102912-2df6bb2aec6d?ixid=MXwxMjA3fDB8MHxzZWFyY2h8NHx8d2F0ZXJmYWxsfGVufDB8fDB8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", "https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mnx8ZmllbGR8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60", " https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8d29vZHN8ZW58MHx8MHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"];
var iRight = $("#icon-right");
var iLeft = $("#icon-left");
var picture = $("#images");
var currentImage = 0;
var circles = $(".circles");

circles.eq(currentImage).addClass("active");//Setting the bgColor of small circle

//Start of Next Image function
iRight.on("click", function(){

   currentImage++;
   
  if(currentImage >= slideShow.length){
      currentImage = 0;
    }//Resets the Image carousel to the beginning

    picture.attr("src", slideShow[currentImage]);//Setting the current Image with the corresponding 'currentImage' value when the next button is clicked

circles.eq(currentImage).addClass("active");//Setting the bgColor of current small circle with the corresponding 'currentImage' value
circles.eq(currentImage).siblings().removeClass("active").addClass("inactive");//removes the "active" background-color from previous circle
});
//End of Next Image function

//Start of Previous Image function 
iLeft.on("click", function(){
   currentImage--;
  if(currentImage < 0){
      currentImage = slideShow.length-1;
    }//Sets the current displayed image to the previous image

 picture.attr("src", slideShow[currentImage]);//Same syntax as Next Image function
 
circles.eq(currentImage).addClass("active");//Same syntax as Next Image function

circles.eq(currentImage).siblings().removeClass("active").addClass("inactive");//Same syntax as Next Image function

});

//Controlling the "click" event for each circle
circles.click(function(){


//Using 'for' loop to iterate over each circle
  for(i=0; i< circles.length; i++){

      if(this == document.getElementsByClassName("circles")[i])
          currentImage = i;
          }
          
    picture.attr("src", slideShow[currentImage]);
    $(this).addClass("active")
$(this).siblings().removeClass("active").addClass("inactive");
});


});

17. By Camila Waz

Made by Camila Waz. Apple Animated jQuery Slider, Clicking the left and right triangle will display another slide. Source

<!-- Content Source: https://www.farmflavor.com/at-home/cooking/10-fun-facts-about-apples/  -->
<link rel='stylesheet' href='//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,600'>
<div class="slider__wrapper">
 
  <div class="slider">
    <div class="slider__content">
      <div class="slider__text">
        <span>1</span>
        <h3>The Producers</h3>
        <p>The top apple producers around the world are China, United States, Turkey, Poland and Italy.</p>
      </div>
      <figure class="slider__image">

        <img src="https://images.unsplash.com/photo-1458011170811-0c83ce240f99?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8b4e45d40741267302ef75900c03b756&auto=format&fit=crop&w=800&q=90">

      </figure>

    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>2</span>
        <h3>The Size</h3>
        <p>Apple varieties range in size from a little larger than a cherry to as large as a grapefruit.</p>
      </div>
      <figure class="slider__image">
        <img src="https://images.unsplash.com/photo-1506277548624-5d9498cde122?ixlib=rb-0.3.5&s=9a53092137398e7219bbfc3acb936073&auto=format&fit=crop&w=800&q=90">

      </figure>

    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>3</span>
        <h3>The Time</h3>
        <p>Apple trees take four to five years to produce their first fruit.</p>
      </div>
      <figure class="slider__image">

        <img src="https://images.unsplash.com/photo-1503327655231-9a047d4772b6?ixlib=rb-0.3.5&s=4164f11f73a7f46defa0da9db7e76443&auto=format&fit=crop&w=800&q=90">

      </figure>

    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>4</span>
        <h3>The advantages</h3>
        <p>Apples contain no fat, sodium or cholesterol and are a good source of fiber.</p>
      </div>
      <figure class="slider__image">

        <img src="https://images.unsplash.com/photo-1513677785800-9df79ae4b10b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3bc74c728882a8c3d2ee704fc06e55f3&auto=format&fit=crop&w=800&q=90">

      </figure>

    </div>
    <div class="slider__content">
      <div class="slider__text">
        <span>5</span>
        <h3>The Surprise</h3>
        <p>Apples ripen six to 10 times faster at room temperature than if they are refrigerated.</p>
      </div>
      <figure class="slider__image">

        <img src="https://images.unsplash.com/photo-1506808541308-577f3be75bb7?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=5c86cf46bfb1e521d127021cf52d6187&auto=format&fit=crop&w=800&q=90">

      </figure>

    </div>
  </div>

</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js'></script>



-------CSS--------


body {
  font-family: Montserrat, sans-serif;
  margin: 0;
}

.slider__wrapper {
  margin: 0 auto;
}
.slider__wrapper .slick-track {
  overflow: hidden;
}

.slider__content {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  position: relative;
  max-height: 90%;
}
.slider__content .slider__text {
  opacity: 0;
  transition: all 1s ease;
  background: rgba(255, 255, 255, 0.75);
  padding: 2.5em 4em;
  position: absolute;
  left: 0;
  width: 40%;
  z-index: 1;
  opacity: 0;
  transition: all 1s linear;
}
.slider__content .slider__text span {
  font-weight: 600;
  font-size: 1.5em;
  background: linear-gradient(151deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  border-radius: 50%;
  line-height: 35px;
  width: 35px;
  display: block;
  text-align: center;
  color: white;
}
.slider__content .slider__text h3 {
  font-weight: 600;
  font-size: 2em;
  display: inline-block;
  margin-bottom: 0;
}
.slider__content .slider__text h3:after {
  content: "";
  width: 100%;
  height: 3px;
  display: block;
  background: linear-gradient(151deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}
.slider__content .slider__text p {
  line-height: 2;
}
.slider__content .slider__image {
  width: 70%;
  margin: 0;
  position: relative;
}
.slider__content .slider__image:before {
  content: "";
  padding-top: 56.25%;
  display: block;
}
.slider__content .slider__image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  object-fit: cover;
  transition: all 0.75s ease;
}

.slick-arrow {
  position: absolute;
  bottom: 2em;
  right: 2em;
  z-index: 2;
  background: linear-gradient(151deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
  background-size: 100%;
  border: 0;
  width: 30px;
  height: 25px;
  text-indent: -9999px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  cursor: pointer;
  transition: all 0.5s ease;
}
.slick-arrow:hover {
  background-size: 190%;
}
.slick-arrow.slick-prev {
  right: 5em;
  transform: rotate(-90deg);
}
.slick-arrow.slick-next {
  transform: rotate(90deg);
}

.slick-active .slider__text {
  opacity: 1;
}
.slick-active .slider__image img {
  width: 100%;
}



-----JS-----


$('.slider').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true });
//# sourceURL=pen.js

18. By Ken Davenport

Made by Ken Davenport. Owl Carousel – Google News Style. Source

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  
<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.4.1/css/all.css'>
<link rel='stylesheet' href='https://cdn.foreversites.com/assets/css/owlcarousel.2.1.6.min.css'>
<link rel='stylesheet' href='https://cdn.foreversites.com/assets/bootstrap/4.1.x/css/bootstrap-custom.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Muli:300,300i,400,400i,700,700i,900,900i'>
<div class="container" style="padding-top:50px;">
  <div class="owl-demo">
    <!-- <div class="slide-progress"></div> -->
    <div id="myCarousel" class="owl-carousel owl-theme">
      <div class="item owl-lazy" data-src="https://picsum.photos/991/601/?random">
        <div class="sliderContent">
          <div class="sliderContentInner">
            <i class="fab fa-android"></i>
            <h3>Here is an Awesome Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium accusamus suscipit natus voluptates</p>
            <p><a href="#" class="btn btn-default">LEARN MORE</a></p>
          </div>
        </div>
      </div>
      <div class="item owl-lazy" data-src="https://picsum.photos/991/602/?random">
        <div class="sliderContent">
          <div class="sliderContentInner">
            <i class="fab fa-apple"></i>
            <h3>Here is an Awesome Headline</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium accusamus suscipit natus voluptates</p>
            <p><a href="#" class="btn btn-default">LEARN MORE</a></p>
          </div>
        </div>
      </div>
      <div class="item owl-lazy" data-src="https://picsum.photos/991/603/?random">
        <div class="sliderContent bgLight">
          <div class="sliderContentInner">
            <i class="fab fa-windows"></i>
            <h3>Here is Another Awesome Headline</h3>
            <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, laudantium accusamus suscipit natus voluptates</p>
            <p><a href="#" class="btn btn-default">LEARN MORE</a></p>
          </div>
        </div>
      </div>
    </div>
   </div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js'></script>



------CSS------


*,*:focus {outline:none !important;}
body {background:#dddddd;font-family: 'Muli', sans-serif;}
.owl-carousel .owl-item {}
.owl-carousel .item.owl-lazy {background-size:150% auto;background-repeat:no-repeat;background-position:center center;position:relative;border-radius:6px;border:solid 1px #ddd;overflow:hidden;transition:background-size 3s ease;}
.owl-carousel .owl-item i.fab {display:inline-block;float:none;clear:both;background:rgba(0,0,0,.15);color:#fff;padding:6px;border-radius:100%;margin-bottom:3px;font-size:20px;margin-bottom:12px;transition:all .5s ease;}
.owl-carousel .owl-item.active .item.owl-lazy {background-size:calc(120% + 50px) auto !important;transition:background-size 3s ease .5s;}
.owl-carousel .owl-item.active i.fab {transition:all .5s ease 1s;}
.owl-carousel .owl-item.active .sliderContentInner {opacity:1;transition:all .8s ease .5s;}
.owl-theme .owl-dots .owl-dot {padding:0px;background:none;border:none;outline:none;}
.sliderContent {position:relative;padding-top:50%;display:block;color:#fff;background-image:linear-gradient(to top, #000000, transparent 55%);}
.sliderContent.bgLight {background-image:linear-gradient(to top, #fff, transparent 75%);color:#000 !important;}
.sliderContentInner {position:absolute;bottom:0px;left:0px;padding:45px 30px;font-size:16px;opacity:0;transition:all .5s ease;}
.sliderContentInner p.lead {line-height:1.3;}
.sliderContent h3 {font-size:24px;font-weight:700;}
.sliderContent .btn.btn-default {background:#06c;color:#fff;padding:6px 12px;font-size:12px;}
@media screen and (max-width:767px) {
.sliderContent h3 {font-size:20px;}  
.sliderContentInner {padding:25px 30px;}
.sliderContentInner p.lead {font-size:13px;}
}

* {outline:none;}
.owl-demo .item img {
  display: block;
  width: 100%;
  height: auto;
}

.slide-progress {
  width: 0;
  max-width: 100%;
  height: 4px;
  background: #cc0000;
  position:relative;
  z-index:9;
  top:4px;
}

.owl-dot.active {position:relative;}
.owl-dot.active:after {
	animation:smProgressbar 5s ease forwards;
	position:absolute;
	top:5px;
	left:7px;
	content:'';
	height:4px;
	width:0px;
	background:#06c;
	z-index:2;
}
.owl-theme .owl-dots {
	position:relative;
	z-index:9;
	top:-40px;
}
.owl-theme .owl-dots .owl-dot span {
	width:30px;
	height:4px;
	border-radius:0px;
}

@keyframes smProgressbar {
0% {width:0px;}
100% {width:30px;}
}
@media screen and (max-width:767px) {
  p.lead {display:none;}
  .sliderContent {padding-top:68%;}
}


-----JS------


jQuery(document).ready(function () {

  //Initiate the slider
  initSlider();
  function initSlider() {
    $(".owl-carousel").owlCarousel({
      items: 1,
      loop: true,
      animateOut: 'fadeOut',
      autoHeight: false,
      autoplay: true,
      autoplayTimeout: 6000,
      autoplayHoverPause: true,
      dots: true,
      lazyLoad: true,
      onDrag: stopSlider
      // onInitialized: startProgressBar,
      // onTranslate: resetProgressBar,
      // onTranslated: startProgressBar
    });
  }

  // When the slider is dragged it will be stopped
  function stopSlider(event) {
    var heroPeepsSlider = $('#myCarousel');
    heroPeepsSlider.trigger('stop.owl.autoplay');
  }

  // Progress Bars
  function startProgressBar() {
    $(".slide-progress").css({
      width: "100%",
      transition: "width 6000ms" });

  }
  function resetProgressBar() {
    $(".slide-progress").css({
      width: 0,
      transition: "width 0s" });

  }
});

// Add Keyboard Functionality
jQuery(document).keyup(function (event) {
  var heroPeepsSlider = jQuery("#myCarousel");
  // handle cursor keys
  heroPeepsSlider.trigger('stop.owl.autoplay');
  if (event.keyCode == 37) {
    // go left
    heroPeepsSlider.trigger('prev.owl.carousel');
  } else if (event.keyCode == 39) {
    // go right
    heroPeepsSlider.trigger('next.owl.carousel');
  }
});

19. By Adam Kuhn

Made by Adam Kuhn. Grid Card Slider, Simple slider with cool animations, clicking the arrow button changes the slide. Source

<link href="https://fonts.googleapis.com/css?family=Acme&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div id='wrapper'>
  <div class='card card1'>
    <div class='content'>
      <div class='inner'></div>
      <h1 class='word'>This</h1>
      <h3 data-text='02'>02</h3>
      <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</p>
    </div>
  </div>
  <div class='card card2'>
    <div class='content'>
      <div class='inner'></div>
      <h1 class='word'>Check</h1>
      <h3 data-text='01'>01</h3>
      <p>Nulla consequat massa quis enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. In ac felis quis tortor malesuada pretium.</p>
    </div>
  </div>
  <div class='card card3'>
    <div class='content'>
      <div class='inner'></div>
      <h1 class='word'>Out</h1>
      <h3 data-text='04'>04</h3>
      <p>Nullam accumsan lorem in dui. Donec vitae orci sed dolor rutrum auctor. Curabitur vestibulum aliquam leo.</p>
    </div>
  </div>
  <div class='card card4'>
    <div class='content'>
      <div class='inner'></div>
      <h1 class='word'>Thing</h1>
      <h3 data-text='03'>03</h3>
      <p>Fusce risus nisl, viverra et, tempor et, pretium in, sapien. In hac habitasse platea dictumst. Nam adipiscing.</p>
    </div>
  </div>
  <div id='trigger'></div>
</div>

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



-------CSS-------


@charset "UTF-8";
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: radial-gradient(circle at center, #555, #222);
  font-family: "Acme";
  perspective: 600px;
}
body * {
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
body *:before, body *:after {
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
body #wrapper {
  width: 700px;
  height: 500px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.25);
}
body #wrapper.flash {
  -webkit-animation: bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
          animation: bend 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
}
@-webkit-keyframes bend {
  0% {
    transform: rotateY(0deg);
  }
  20% {
    transform: rotateY(2.5deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes bend {
  0% {
    transform: rotateY(0deg);
  }
  20% {
    transform: rotateY(2.5deg);
  }
  50% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
body #wrapper #trigger {
  position: absolute;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 0 1px #ccc, 0 0 0 1px #ccc;
  z-index: 999;
  border-radius: 100%;
  left: calc(12.5% - 12.5px);
  top: calc(50% - 12.5px);
  transition: background 0.2s ease-in-out, opacity 0.2s ease-in-out;
  cursor: pointer;
}
body #wrapper #trigger:hover {
  background: #ccc;
}
body #wrapper #trigger:hover:before {
  color: #222;
}
body #wrapper #trigger.flash {
  transition: box-shadow 0.2s ease-in-out, opacity 0.2s ease-in-out;
  transition-delay: 0s, 0.2s;
  box-shadow: 0 0 0 1px #ccc, 0 0 0 10px transparent;
  opacity: 0;
  pointer-events: none;
}
body #wrapper #trigger:before {
  content: "β†’";
  position: absolute;
  color: #ccc;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: 0.2s ease-in-out;
}
body #wrapper.fade {
  opacity: 0.25;
}
body #wrapper .card {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: 0;
  transition: transform 0.4s ease-in-out;
}
body #wrapper .card .content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, transparent calc(50% - 1px), rgba(0, 0, 0, 0.05) calc(50% - 1px), rgba(0, 0, 0, 0.05) 50%, transparent 50%), linear-gradient(to right, transparent calc(56% - 1px), rgba(0, 0, 0, 0.05) calc(56% - 1px), rgba(0, 0, 0, 0.05) 56%, transparent 56%), #ccc;
  background-size: 100%, 100% 50%, 100%;
  background-repeat: no-repeat;
  background-position: 50%, 50% 100%, 50%;
}
body #wrapper .card .content h1 {
  opacity: 1;
  position: absolute;
  left: calc(25% + 40px);
  top: 20px;
  font-size: 120px;
  margin: 0px;
  color: rgba(0, 0, 0, 0.175);
  text-transform: uppercase;
}
body #wrapper .card .content p {
  position: absolute;
  width: 22.5%;
  height: 40%;
  display: inline-block;
  bottom: 0;
  left: calc(25% + 40px);
  line-height: 1.5;
  font-family: "Montserrat";
  font-size: 14px;
  color: #555;
  padding: 5px;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
}
body #wrapper .card .content h3 {
  position: absolute;
  right: -200px;
  top: 20px;
  font-size: 80px;
  margin: 0;
  color: transparent;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.175);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0s ease-in-out, right 0.4s ease-in-out;
  transition-delay: 0.6s, 0s;
  padding: 0 10px;
}
body #wrapper .card .content h3:before {
  content: attr(data-text);
  color: transparent;
  -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.25);
  position: absolute;
  transform: translateY(125%) skewY(45deg);
  transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 0.4s;
  left: 10px;
  top: 0;
}
body #wrapper .card .content:before {
  opacity: 0;
  z-index: 2;
  transition: 0.2s ease-in-out;
}
body #wrapper .card .content:before, body #wrapper .card .content:after, body #wrapper .card .content .inner {
  content: "";
  position: absolute;
  width: 112.5%;
  height: 100%;
  left: 12.5%;
  top: 0;
  background-size: cover;
  transition: 0.5s ease-in-out;
}
body #wrapper .card .content:after {
  background: transparent;
  transition: 0.5s ease-in-out;
}
body #wrapper .card .content:before, body #wrapper .card .content .inner:after {
  filter: saturate(0);
}
body #wrapper .card .content .inner {
  width: 40%;
  height: 45%;
  left: auto;
  right: 0%;
  z-index: 999;
  top: auto;
  bottom: 0;
  transform-origin: left;
  transform: scaleX(0);
  overflow: hidden;
}
body #wrapper .card .content .inner:before, body #wrapper .card .content .inner:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  left: 0;
  top: 0;
  z-index: 2;
  transform: scaleX(1);
  transform-origin: right;
}
body #wrapper .card .content .inner:after {
  background-size: cover;
  z-index: 1;
  transform-origin: 50% 50%;
  transform: scale(1.5);
}
body #wrapper .card.card1 .content:before, body #wrapper .card.card1 .content .inner:after {
  background-image: url("https://images.unsplash.com/photo-1558845530-c8963f0c26fa?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
}
body #wrapper .card.card2 .content:before, body #wrapper .card.card2 .content .inner:after {
  background-image: url("https://images.unsplash.com/photo-1558848369-839e86bc7f84?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80");
}
body #wrapper .card.card3 .content:before, body #wrapper .card.card3 .content .inner:after {
  background-image: url("https://images.unsplash.com/photo-1558775723-1f9ca54bb7cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2767&q=80");
}
body #wrapper .card.card4 .content:before, body #wrapper .card.card4 .content .inner:after {
  background-image: url("https://images.unsplash.com/photo-1558848618-ce2c2e7bb671?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1650&q=80");
}
body #wrapper .card:first-of-type {
  pointer-events: all;
  left: 0;
  -webkit-animation: scaleIn 1s ease-in-out 1 forwards;
          animation: scaleIn 1s ease-in-out 1 forwards;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  transform: translateX(-100%);
  z-index: 11;
}
@-webkit-keyframes scaleIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-75%);
  }
}
@keyframes scaleIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(-75%);
  }
}
body #wrapper .card:first-of-type .content:before {
  opacity: 0.25;
  -webkit-animation: scaleDown 0.75s ease-in-out 1 forwards;
          animation: scaleDown 0.75s ease-in-out 1 forwards;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  transform: translateX(6.75%);
}
@-webkit-keyframes scaleDown {
  to {
    transform: translateX(0);
  }
}
@keyframes scaleDown {
  to {
    transform: translateX(0);
  }
}
body #wrapper .card:first-of-type .content:after {
  background: #222;
}
body #wrapper .card:nth-of-type(2) {
  z-index: 10;
  -webkit-animation: scaleIn2 1s ease-in-out 1 forwards;
          animation: scaleIn2 1s ease-in-out 1 forwards;
  will-change: transform;
}
@-webkit-keyframes scaleIn2 {
  from {
    transform: translateX(-75%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes scaleIn2 {
  from {
    transform: translateX(-75%);
  }
  to {
    transform: translateX(0%);
  }
}
body #wrapper .card:nth-of-type(2) .content p {
  transition-delay: 1.85s;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
body #wrapper .card:nth-of-type(2) .content:after {
  transition-delay: 0.5s;
}
body #wrapper .card:nth-of-type(2) .content h3 {
  transition: transform 0.2s ease-in-out;
  right: 20px;
  transform: scaleX(1);
  transition-delay: 2s;
}
body #wrapper .card:nth-of-type(2) .content h3:before {
  transform: translateY(0%);
  transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-delay: 2.25s;
}
body #wrapper .card:nth-of-type(2) .content h1 {
  right: 100px;
}
body #wrapper .card:nth-of-type(2) .content .inner {
  -webkit-animation: scaleIn4 0.5s ease-in-out 1 forwards;
          animation: scaleIn4 0.5s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.35s;
          animation-delay: 1.35s;
  will-change: transform;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
@-webkit-keyframes scaleIn4 {
  to {
    transform: scaleX(1);
  }
}
@keyframes scaleIn4 {
  to {
    transform: scaleX(1);
  }
}
body #wrapper .card:nth-of-type(2) .content .inner:after {
  -webkit-animation: scaleUp 1s ease-in-out 1 forwards;
          animation: scaleUp 1s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.9s;
          animation-delay: 1.9s;
  will-change: transform;
}
@-webkit-keyframes scaleUp {
  to {
    transform: scale(1);
  }
}
@keyframes scaleUp {
  to {
    transform: scale(1);
  }
}
body #wrapper .card:nth-of-type(2) .content .inner:before {
  -webkit-animation: scaleIn5 0.35s ease-in-out 1 forwards;
          animation: scaleIn5 0.35s ease-in-out 1 forwards;
  -webkit-animation-delay: 1.75s;
          animation-delay: 1.75s;
  will-change: transform;
}
@-webkit-keyframes scaleIn5 {
  to {
    transform: scaleX(0);
  }
}
@keyframes scaleIn5 {
  to {
    transform: scaleX(0);
  }
}
body #wrapper .card:nth-of-type(2) .content:before {
  -webkit-animation: scaleIn3 1.5s ease-in-out 1 forwards;
          animation: scaleIn3 1.5s ease-in-out 1 forwards;
  -webkit-animation-delay: 0.15s;
          animation-delay: 0.15s;
  opacity: 1;
  will-change: transform;
}
@-webkit-keyframes scaleIn3 {
  0% {
    transform: translateX(0%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  50% {
    transform: translateX(-12.5%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    transform: translateX(-12.5%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
@keyframes scaleIn3 {
  0% {
    transform: translateX(0%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  50% {
    transform: translateX(-12.5%);
    -webkit-clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
            clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    transform: translateX(-12.5%);
    -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
            clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}
body #wrapper .card:nth-of-type(3) {
  z-index: 3;
}
body #wrapper .card:nth-of-type(3) .content:before, body #wrapper .card:nth-of-type(3) .content:after {
  opacity: 0;
  transition: 0s;
  transition-delay: 0s;
}
body #wrapper .card:nth-of-type(3) .content .inner {
  transform: scaleX(1);
  transition: 0.5s ease-in-out;
  -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
          clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
body #wrapper .card:nth-of-type(3) .content .inner:before {
  display: none;
}
body #wrapper .card:nth-of-type(3) .content .inner:after {
  transform: scale(1);
}



-------JS-------


/*
 * based on this dribbble shot by Andrew Baygulov: https://dribbble.com/shots/6427548-Kaiser-Slideshow
 */

(function ($) {
  var isActive = false;

  $.fn.shuffleText = function (shuffleResult, options) {
    var $this = $(this);

    // Add/Remove Chars You Want To Appear During Shuffle In This Array
    var aChars = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "k", "r", "s", "t", "u", "v", "w", "x", "y", "z", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");

    // Defaults Settings
    var defaults = $.extend({
      time: 40, // Time In ms (Milliseconds) Of Shuffle For Each Letter
      maxTime: 1000, // Max Time In ms (Milliseconds) Of Global Shuffle
      amount: 3, // Amount Of Shuffle For Each Letter
      complete: null // Do Something When Shuffle Is Completed
    }, options);

    if (shuffleResult == undefined)
    shuffleResult = '';

    // Init Variables
    var aToShuffle = $this.text().split(''),
    aShuffleResult = shuffleResult.split(''),
    iFlag = 0,n = 0,duration = 0,iLenght = 0,
    interval,aLetters;

    if (!isActive) {
      isActive = true;
      // Launch Shuffle
      return $this.each(function () {
        replaceEntry();

        aLetters = $this.find('span');

        // Debugging
        if (defaults.amount < 0)
        defaults.amount = 0;

        // Calculate Duration Of Global Shuffle
        if (iLength * (defaults.amount + 1) * defaults.time > defaults.maxTime) {
          duration = defaults.maxTime / (iLength * (defaults.amount + 1));
        } else {
          duration = defaults.time;
        }

        randomChars();
        interval = setInterval(randomChars, Math.floor(duration));

        // Create The Correct DOM Structure
        function replaceEntry() {
          $this.empty();

          if (aToShuffle.length > aShuffleResult.length)
          iLength = aToShuffle.length;else

          iLength = aShuffleResult.length;

          for (i = 0; i < iLength; i++) {
            if (aToShuffle[i] == undefined)
            $this.append($('<span></span>'));else

            $this.append($('<span>' + aToShuffle[i] + '</span>'));
          }
        }

        // The Shuffle Function
        function randomChars() {
          var randomChars = aChars[Math.floor(Math.random() * aChars.length)];

          if (iFlag >= iLength) {
            isActive = false;
            $this.text(shuffleResult);

            clearInterval(interval);
            if (typeof defaults.complete == 'function')
            defaults.complete.call($this);
          } else {
            if (n == defaults.amount) {
              if (iFlag >= aShuffleResult.length)
              $(aLetters[iFlag]).text('');else

              $(aLetters[iFlag]).text(aShuffleResult[iFlag]);

              iFlag++;n = 0;
            } else {
              $(aLetters[iFlag]).text(randomChars);
              n++;
            }
          }
        }
      });
    }
  };
})(jQuery);


$("#trigger").click(function () {
  $('.card').removeClass("active");
  $('#wrapper').prepend($('#wrapper .card:last'));
  $(this).addClass("flash");
  $('#wrapper').addClass("flash");
  $('.card:nth-of-type(2)').addClass("active");
  $text = $('.active .word').text();
  setTimeout(function () {
    $(".active .word").shuffleText($text, {
      frames: 2000,
      maxSpeed: 1,
      amount: 35,
      complete: null });


  }, 1200);
  setTimeout(function () {
    $("#trigger").removeClass("flash");
    $("#wrapper").removeClass("flash");

  }, 2000);
});
//# sourceURL=pen.js

20. By Paul Noble

Made by Paul Noble. Split 3D Carousel, with rotating 3D Design. Source

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather:300:italic" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<div class="carousel">
    <div class="carousel__control">
    </div>
    <div class="carousel__stage">
        <div class="spinner spinner--left">
            <div class="spinner__face js-active" data-bg="#27323c">
                <div class="content" data-type="iceland">
                    <div class="content__left">
                        <h1>ICELAND<br><span>EUROPE</span></h1>
                    </div>
                    <div class="content__right">
                        <div class="content__main">
                            <p>β€œAs I flew north to begin my third circuit of Iceland in four years, I was slightly anxious. The number of visitors to Iceland has doubled in that period, and I feared this might mean a little less magic to go around. At the end of this trip, 6000km later, I'm thrilled to report that the magic levels remain high. It's found in glorious football victories and Viking chants, kayaking among icebergs, sitting with puffins under the midnight sun and crunching across brand-new lava fields.” </p>
                          <p>– Carolyn Bain</p>
                        </div>
                        <h3 class="content__index">01</h3>
                    </div>
                </div>
            </div>
            <div class="spinner__face" data-bg="#19304a">
                <div class="content" data-type="china">
                    <div class="content__left">
                        <h1>CHINA<br><span>ASIA</span></h1>
                    </div>
                    <div class="content__right">
                        <div class="content__main">
                            <p>β€œIts modern face is dazzling, but China is no one-trick pony. The world's oldest continuous civilisation isn't all smoked glass and brushed aluminium and while you won't be tripping over artefacts – three decades of round-the-clock development and rash town-planning have taken their toll – rich seams of antiquity await.”</p>
                          <p>– Damian Harper</p>
                        </div>
                        <h3 class="content__index">02</h3>
                    </div>
                </div>
            </div>
            <div class="spinner__face" data-bg="#2b2533">
                <div class="content" data-type="usa">
                    <div class="content__left">
                        <h1>USA<br><span>NORTH AMERICA</span></h1>
                    </div>
                    <div class="content__right">
                        <div class="content__main">
                            <p>β€œWhen it comes to travel, America has always floored me with its staggering range of possibilities. Not many other countries have so much natural beauty – mountains, beaches, rainforest, deserts, canyons, glaciers – coupled with fascinating cities to explore, an unrivaled music scene and all the things that make travel so rewarding (friendly locals, great restaurants and farmers markets, and plenty of quirky surprises).” </p>
                          <p>– Regis St Louis</p>
                        </div>
                        <h3 class="content__index">03</h3>
                    </div>
                </div>
            </div>
            <div class="spinner__face" data-bg="#312f2d">
                <div class="content" data-type="peru">
                    <div class="content__left">
                        <h1>PERU<br><span>SOUTH AMERICA</span></h1>
                    </div>
                    <div class="content__right">
                        <div class="content__main">
                            <p>β€œFor me, Peru is the molten core of South America, a distillation of the oldest traditions and the finest building, weaving and art made by the most sophisticated cultures on the continent. In Peru the wildest landscapes – from frozen Andean peaks to the deep Amazon – help us re-forge our connection to the natural world. It is also a cultural stew, where diverse peoples live side by side, negotiating modern life with humor and aplomb. Beyond that, the cuisine alone makes it worth the trip. Every return is rich and surprising.”</p>
                          <p>– Carolyn McCarthy</p>
                        </div>
                        <h3 class="content__index">04</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--  Poor man's preloader -->
<div style="height: 0; width: 0; overflow: hidden">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/peru.jpg">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/canada.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/china.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/usa.jpg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/iceland.jpg"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>



--------CSS----------



html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.js-transitions-disabled * {
  transition: none !important;
}
.carousel {
  position: relative;
  height: 100%;
  overflow: hidden;
  perspective: 50vw;
  perspective-origin: 50% 50%;
}
.carousel__control {
  position: absolute;
  height: 160px;
  width: 40px;
  background: #fff;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}
.carousel__control a {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 75%;
  box-sizing: border-box;
}
.carousel__control a:hover:before {
  background-color: rgba(0,0,0,0.4);
}
.carousel__control a.active:before,
.carousel__control a.active:hover:before {
  background-color: rgba(0,0,0,0.6);
}
.carousel__control a:first-child {
  margin-top: 15px;
}
.carousel__control a:before {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 50%;
  padding-top: 25%;
  width: 25%;
  background: rgba(0,0,0,0.2);
  content: '';
  display: block;
  margin-top: -12.5%;
}
.carousel__stage {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  margin: auto;
  transform-style: preserve-3d;
  transform: translateZ(calc(-50vh + 20px));
}
.spinner {
  position: absolute;
  width: calc(50vw - (20px));
  height: calc(100vh - 40px);
  top: 0;
  left: 0;
  right: auto;
  bottom: 0;
  margin: auto;
  transform-style: preserve-3d;
  transition: transform 1s;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  transform-origin: 50% 50%;
  transform: rotateX(0);
}
.js-spin-fwd .spinner {
  transform: rotateX(-90deg);
}
.js-spin-bwd .spinner {
  transform: rotateX(90deg);
}
.js-spin-fwd .spinner--right {
  transform: rotateX(90deg);
}
.js-spin-bwd .spinner--right {
  transform: rotateX(-90deg);
}
.spinner--right {
  right: 0;
  left: auto;
}
.spinner__face {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.spinner__face.js-next {
  display: block;
  transform: rotateX(90deg) translateZ(calc(50vh - 20px));
}
.spinner--right .spinner__face.js-next {
  transform: rotateX(270deg) translateZ(calc(50vh - 20px));
}
.js-spin-bwd .spinner__face.js-next {
  transform: rotateX(-90deg) translateZ(calc(50vh - 20px));
}
.js-spin-bwd .spinner--right .spinner__face.js-next {
  transform: rotateX(-270deg) translateZ(calc(50vh - 20px));
}
.js-active {
  display: block;
  transform: translateZ(calc(50vh - 20px));
}
.content {
  position: absolute;
  width: 200%;
  height: 100%;
  left: 0;
}
.spinner--right .content {
  left: -100%;
}
.content__left,
.content__right {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
}
.content__right {
  right: 0;
  left: auto;
}
.content__left {
  background-repeat: no-repeat;
  background-size: cover;
}
.content__left:after {
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
}
.content__left h1 {
  position: absolute;
  top: 50%;
  margin-top: -3vw;
  text-align: center;
  font-family: oswald;
  font-size: 5vw;
  height: 10vw;
  opacity: 1;
  color: #fff;
  width: 100%;
  letter-spacing: 0.15em;
  line-height: 0.6;
}
.content__left span {
  font-size: 1vw;
  font-weight: 300;
  letter-spacing: 0.2em;
  opacity: 0.9;
  font-family: Merriweather;
}
.content__right {
  display: flex;
  align-items: center;
  justify-content: center;
}
.content__right .content__main {
  position: absolute;
  font-family: Merriweather, serif;
  text-align: left;
  color: #fff;
  font-size: 1.3vw;
  padding: 0 8vw;
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
  opacity: 0.8;
}
.content__right .content__main p:last-child {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.85em;
}
.content__right .content__index {
  font-size: 30vh;
  position: absolute;
  right: -1vh;
  top: 35vh;
  opacity: 0.04;
  font-family: oswald;
  color: #fff;
}
[data-type="iceland"] .content__left {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/iceland.jpg");
}
.spinner--right [data-type="iceland"] .content__left {
  background-image: none;
}
[data-type="china"] .content__left {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/china.jpg");
}
.spinner--right [data-type="china"] .content__left {
  background-image: none;
}
[data-type="usa"] .content__left {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/usa.jpg");
}
.spinner--right [data-type="usa"] .content__left {
  background-image: none;
}
[data-type="peru"] .content__left {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/215059/peru.jpg");
}
.spinner--right [data-type="peru"] .content__left {
  background-image: none;
}



--------JS---------


let activeIndex = 0;
let limit = 0;
let disabled = false;
let $stage;
let $controls;
let canvas = false;

const SPIN_FORWARD_CLASS = 'js-spin-fwd';
const SPIN_BACKWARD_CLASS = 'js-spin-bwd';
const DISABLE_TRANSITIONS_CLASS = 'js-transitions-disabled';
const SPIN_DUR = 1000;

const appendControls = () => {
  for (let i = 0; i < limit; i++) {if (window.CP.shouldStopExecution(0)) break;
    $('.carousel__control').append(`<a href="#" data-index="${i}"></a>`);
  }window.CP.exitedLoop(0);
  let height = $('.carousel__control').children().last().outerHeight();

  $('.carousel__control').css('height', 30 + limit * height);
  $controls = $('.carousel__control').children();
  $controls.eq(activeIndex).addClass('active');
};

const setIndexes = () => {
  $('.spinner').children().each((i, el) => {
    $(el).attr('data-index', i);
    limit++;
  });
};

const duplicateSpinner = () => {
  const $el = $('.spinner').parent();
  const html = $('.spinner').parent().html();
  $el.append(html);
  $('.spinner').last().addClass('spinner--right');
  $('.spinner--right').removeClass('spinner--left');
};

const paintFaces = () => {
  $('.spinner__face').each((i, el) => {
    const $el = $(el);
    let color = $(el).attr('data-bg');
    $el.children().css('backgroundImage', `url(${getBase64PixelByColor(color)})`);
  });
};

const getBase64PixelByColor = hex => {
  if (!canvas) {
    canvas = document.createElement('canvas');
    canvas.height = 1;
    canvas.width = 1;
  }
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = hex;
    ctx.fillRect(0, 0, 1, 1);
    return canvas.toDataURL();
  }
  return false;
};

const prepareDom = () => {
  setIndexes();
  paintFaces();
  duplicateSpinner();
  appendControls();
};

const spin = (inc = 1) => {
  if (disabled) return;
  if (!inc) return;
  activeIndex += inc;
  disabled = true;

  if (activeIndex >= limit) {
    activeIndex = 0;
  }

  if (activeIndex < 0) {
    activeIndex = limit - 1;
  }

  const $activeEls = $('.spinner__face.js-active');
  const $nextEls = $(`.spinner__face[data-index=${activeIndex}]`);
  $nextEls.addClass('js-next');

  if (inc > 0) {
    $stage.addClass(SPIN_FORWARD_CLASS);
  } else {
    $stage.addClass(SPIN_BACKWARD_CLASS);
  }

  $controls.removeClass('active');
  $controls.eq(activeIndex).addClass('active');

  setTimeout(() => {
    spinCallback(inc);
  }, SPIN_DUR, inc);
};

const spinCallback = inc => {

  $('.js-active').removeClass('js-active');
  $('.js-next').removeClass('js-next').addClass('js-active');
  $stage.
  addClass(DISABLE_TRANSITIONS_CLASS).
  removeClass(SPIN_FORWARD_CLASS).
  removeClass(SPIN_BACKWARD_CLASS);

  $('.js-active').each((i, el) => {
    const $el = $(el);
    $el.prependTo($el.parent());
  });
  setTimeout(() => {
    $stage.removeClass(DISABLE_TRANSITIONS_CLASS);
    disabled = false;
  }, 100);

};

const attachListeners = () => {

  document.onkeyup = e => {
    switch (e.keyCode) {
      case 38:
        spin(-1);
        break;
      case 40:
        spin(1);
        break;}

  };

  $controls.on('click', e => {
    e.preventDefault();
    if (disabled) return;
    const $el = $(e.target);
    const toIndex = parseInt($el.attr('data-index'), 10);
    spin(toIndex - activeIndex);

  });
};

const assignEls = () => {
  $stage = $('.carousel__stage');
};

const init = () => {
  assignEls();
  prepareDom();
  attachListeners();
};


$(() => {
  init();
});

21. By Ivan Grozdic

Made by Ivan Grozdic. Hover slider (dark/light), Hovering over any option will change the slide to that particular option, it also has a dark/light mode toggle switch. Source

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css'>
<div class="hero-center-section">
		<div class="left-text">nature</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/nature.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">travel</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/travel.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">fashion</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/fashion.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">animals</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/animals.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">business</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/business.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="hero-center-section">
		<div class="left-text">art</div>
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-md-8">
					<div class="img-wrap">
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/art.jpg" alt="">
					</div>
				</div>
			</div>
		</div>
	</div>
		
		
	<div class="section padding-top-bottom over-hide z-bigger">
		<ul class="slide-buttons">
			<li class="">
				<a href="#0" class="hover-target" data-hover="nature">nature</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" class="hover-target" data-hover="travel">travel</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="fashion">fashion</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="animals">animals</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="business">business</a>
			</li>
			<li class="">
				<a href="#0" class="hover-target" data-hover="art">art</a>
			</li>
		</ul>
	</div>
		
	<!-- Page cursor
	================================================== -->
	
	<div class='cursor' id="cursor"></div>
	<div class='cursor2' id="cursor2"></div>
	<div class='cursor3' id="cursor3"></div> 
		
	<!-- Link to page
	================================================== -->

	<a href="https://front.codes" class="link-to-page hover-target" target="_blank"><img src="https://assets.codepen.io/1462889/fcy.png" alt=""></a>
			
	<!-- Dark/light switch
	================================================== -->
	
	<div class="bottom-right">								
		<div class="switch">
			<div class="circle hover-target"></div>
		</div>									
	</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>




---------CSS--------


/* Please ❀ this if you like it! */


/* ======================================== * 
		        BEST VIEWED FULLSCREEN
   https://codepen.io/ig_design/full/MRbJWW
 * ======================================== */

@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');


:root {
	--white: #ffffff;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #424455;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
}

/* #Primary
================================================== */

body{
	width: 100%;
	height: 100vh;
	background: var(--dark-blue);
	overflow-x: hidden;
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 30px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
p{
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 30px;
	color: var(--white);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
::selection {
	color: var(--white);
	background-color: var(--black);
}
::-moz-selection {
	color: var(--white);
	background-color: var(--black);
}
mark{
	color: var(--white);
	background-color: var(--black);
}
.color-yellow {
    color: var(--yellow);
}
.size-18{
    font-size: 18px;
}
.opacity-40{
	opacity: 0.4;
}
.opacity-60{
	opacity: 0.6;
}
.section {
    position: relative;
	width: 100%;
	display: block;
	z-index: 30 !important;
}
.over-hide {
    overflow: hidden;
}
.padding-top-bottom {
	padding-top: 90px;
	padding-bottom: 90px;
}
.hero-center-section{
	position: fixed;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: 10;
	transform: translateY(-50%);
	opacity: 0;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.hero-center-section.show{
	opacity: 1;
}
.hero-center-section .left-text{
	position: absolute;
	top: -50%;
	left: -20px;
	height: 200%;
	z-index: 1;
    font-family: 'Poppins', sans-serif;
	font-weight: 900;
	text-align: center;    
	-webkit-writing-mode: vertical-lr;
    writing-mode: vertical-lr;
    font-size: 7vw;
    line-height: 1;
    color: rgba(200,200,200,.1);
    background: linear-gradient(90deg, rgba(200,200,200,0), rgba(200,200,200,0.1));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	line-height: 1;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.hero-center-section.show .left-text{
	left: 0;
}

.z-bigger {
	z-index: 30 !important;
}

.img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.02);
	display: block;
	transform: scale(1.03);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.hero-center-section.show .img-wrap{
	transform: scale(1);
}
.img-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
	z-index: 9999999;
}
.cursor{
	background-color: var(--white);
	height: 0;
	width: 0;
	z-index: 9999999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid var(--white);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}

.link-to-page {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20000;
    cursor: pointer;
    width: 50px;
}
.link-to-page img{
	width: 100%;
	height: auto;
	display: block;
}
.slide-buttons{
	position: relative;
	padding: 0;
	margin: 0 auto;
	text-align: center;
  width: 580px;
  max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	list-style: none;
}
.slide-buttons li{
	position: relative;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	margin: 60px 0;
	display: block;
	list-style: none;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.slide-buttons li a{
	position: relative;
	display: inline-block;
    font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 100px;
	line-height: 1;
	text-transform: uppercase;
	-webkit-text-stroke: 2px var(--white);
    text-stroke: 2px var(--white);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
	opacity: 0.3;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.slide-buttons li.active a{
	opacity: 1;
}
.slide-buttons li a:hover{
	text-decoration: none;
}
.slide-buttons li a:focus,
.slide-buttons li a:active{
	border: none;
	outline: none;
	box-shadow: none;
}
.slide-buttons li a::before {
	position: absolute;
	top: 0;
	left: 0;
    font-family: 'Poppins', sans-serif;
	font-weight: 900;
	font-size: 100px;
	line-height: 1;
	overflow: hidden;
	text-transform: uppercase;
	padding: 0;
	max-height: 0;
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--white);
    text-fill-color: var(--white);
	color: var(--white);
	content: attr(data-hover);
	-webkit-transition: max-height 0.4s;
	-moz-transition: max-height 0.4s;
	transition: max-height 0.4s;
}
.slide-buttons li.active a::before,
.slide-buttons li a:active::before,
.slide-buttons li a:focus::before {
	max-height: 100%;
}


.bottom-right{
	position: fixed;
	bottom: 50px;
	right: 30px;
	z-index: 1000;
}
.switch,
.circle {
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.switch {
	width: 80px;
	height: 4px;
	border-radius: 27px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1900ms;
}
.circle {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dark-light);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.circle:before {
	position: absolute;
	font-family: 'unicons';
	content: '\eac1';
	top: 0;
	left: 0;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 100%;
	height: 40px;
	opacity: 1;
	color: var(--grey);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.circle:after {
	position: absolute;
	font-family: 'unicons';
	content: '\eb8f';
	top: 0;
	left: 0;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 100%;
	height: 40px;
	color: var(--yellow);
	opacity: 0;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.switched {
}
.switched .circle {
	left: 40px;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: var(--dark);
}
.switched .circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.switched .circle:before {
	opacity: 0;
}
.switched .circle:after {
	opacity: 1;
}
body.light{
	background: var(--white);
}
body.light p{
	color: var(--dark-blue);
}
body.light h3{
	color: var(--dark);
}
body.light .cursor,
body.light .cursor2,
body.light .cursor3{
	mix-blend-mode: difference;
	z-index: 9999999 !important;
}
body.light .cursor.hover,
body.light .cursor2.hover,
body.light .cursor3.hover{
}
body.light .cursor{
	background-color: var(--dark-blue);
}
body.light .cursor2{
	height: 16px;
	width: 16px;
	background-color: var(--dark-blue);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
	mix-blend-mode: difference;
	border-color: transparent;
}
body.light .cursor.hover,
body.light .cursor2.hover,
body.light .cursor3.hover{
	opacity: 0;
}
body.light .cursor2.hover{
	background: rgba(0,0,0,1);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}
body.light .slide-buttons li a{
	-webkit-text-stroke: 2px var(--dark-blue);
    text-stroke: 2px var(--dark-blue);
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
	opacity: 1;
}
body.light .slide-buttons li a::before {
	-webkit-text-stroke: transparent;
    text-stroke: transparent;
    -webkit-text-fill-color: var(--dark-blue);
    text-fill-color: var(--dark-blue);
	color: var(--dark-blue);
}
body.light .hero-center-section.show{
	margit-top: 0;
	opacity: 0.9;
}
body.light .hero-center-section .left-text{
    color: rgba(0,0,0,.16);
    background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0,0,0,0.16)); 
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* #Media
================================================== */


@media (max-width: 1199px) { 
	.hero-center-section .left-text{
		font-size: 13vw;
	}
	.slide-buttons li{
		margin: 50px 0;
	}
	.slide-buttons li a{
		font-size: 80px;
	}
	.slide-buttons li a::before {
		font-size: 80px;
	}	
}

@media (max-width: 991px) { 
	.hero-center-section .left-text{
		font-size: 16vw;
	}
}

@media (max-width: 767px) {
	.cursor,
	.cursor2,
	.cursor3{
		display: none;
	}
	.hero-center-section .left-text{
		display: none;
	}
	.slide-buttons li{
		margin: 40px 0;
	}
	.slide-buttons li a{
		font-size: 60px;
		font-weight: 700;
	}
	.slide-buttons li a::before {
		font-size: 60px;
		font-weight: 700;
	}	
}

@media (max-width: 575px) {
	.slide-buttons li a{
		font-size: 50px;
		font-weight: 700;
	}
	.slide-buttons li a::before {
		font-size: 50px;
		font-weight: 700;
	}	
}




--------JS---------


/* Please ❀ this if you like it! */



(function ($) {"use strict";

  //Page cursors

  document.getElementsByTagName("body")[0].addEventListener("mousemove", function (n) {
    t.style.left = n.clientX + "px",
    t.style.top = n.clientY + "px",
    e.style.left = n.clientX + "px",
    e.style.top = n.clientY + "px",
    i.style.left = n.clientX + "px",
    i.style.top = n.clientY + "px";
  });
  var t = document.getElementById("cursor"),
  e = document.getElementById("cursor2"),
  i = document.getElementById("cursor3");
  function n(t) {
    e.classList.add("hover"), i.classList.add("hover");
  }
  function s(t) {
    e.classList.remove("hover"), i.classList.remove("hover");
  }
  s();
  for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {if (window.CP.shouldStopExecution(0)) break;
    o(r[a]);
  }window.CP.exitedLoop(0);
  function o(t) {
    t.addEventListener("mouseover", n), t.addEventListener("mouseout", s);
  }


  //Switch light/dark

  $(".switch").on('click', function () {
    if ($("body").hasClass("light")) {
      $("body").removeClass("light");
      $(".switch").removeClass("switched");
    } else
    {
      $("body").addClass("light");
      $(".switch").addClass("switched");
    }
  });

  $(document).ready(function () {

    /* Hero Case study images */

    $('.slide-buttons li:nth-child(1)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(1)').addClass("show");
      $('.slide-buttons li:nth-child(1)').addClass('active');
    });
    $('.slide-buttons li:nth-child(2)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(2)').addClass("show");
      $('.slide-buttons li:nth-child(2)').addClass('active');
    });
    $('.slide-buttons li:nth-child(3)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(3)').addClass("show");
      $('.slide-buttons li:nth-child(3)').addClass('active');
    });
    $('.slide-buttons li:nth-child(4)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(4)').addClass("show");
      $('.slide-buttons li:nth-child(4)').addClass('active');
    });
    $('.slide-buttons li:nth-child(5)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(5)').addClass("show");
      $('.slide-buttons li:nth-child(5)').addClass('active');
    });
    $('.slide-buttons li:nth-child(6)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(6)').addClass("show");
      $('.slide-buttons li:nth-child(6)').addClass('active');
    });
    $('.slide-buttons li:nth-child(1)').trigger('mouseenter');

  });

})(jQuery);
//# sourceURL=pen.js

22. By Ivan Grozdic

Made by Ivan Grozdic. TV Shows Slider with cursor effect, hovering over the images at the left side changes the slide to that particular one, it also has a dark mode toggle switch. Source

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/unicons.css'>
<div class="section full-height over-hide z-bigger">
		<div class="hero-center-section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center">
						<div class="img-wrap">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/1.jpg" alt="">
						</div>
					</div>
					<div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left">
						<h3 class="mb-1">Supernatural</h3>
						<p class="small mb-2 opacity-60">44min | Drama, Fantasy, Horror</p>
						<p class="mb-0">
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="ml-1 ml-sm-3 size-18 color-yellow">8.5/10</span>
						</p>
						<p class="mt-4 pt-2 mb-0 d-none d-sm-block">Two brothers follow their father's footsteps as hunters, fighting evil supernatural beings of many kinds, including monsters, demons, and gods that roam the earth.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="hero-center-section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center">
						<div class="img-wrap">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/2.jpg" alt="">
						</div>
					</div>
					<div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left">
						<h3 class="mb-1">Arrow</h3>
						<p class="small mb-2 opacity-60">42min | Action, Adventure, Crime</p>
						<p class="mb-0">
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="ml-1 ml-sm-3 size-18 color-yellow">7.7/10</span>
						</p>
						<p class="mt-4 pt-2 mb-0 d-none d-sm-block">Spoiled billionaire playboy Oliver Queen is missing and presumed dead when his yacht is lost at sea. He returns five years later a changed man, determined to...</p>
					</div>
				</div>
			</div>
		</div>
		<div class="hero-center-section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center">
						<div class="img-wrap">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/3.jpg" alt="">
						</div>
					</div>
					<div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left">
						<h3 class="mb-1">Gotham</h3>
						<p class="small mb-2 opacity-60">42min | Action, Crime, Drama</p>
						<p class="mb-0">
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="ml-1 ml-sm-3 size-18 color-yellow">7.9/10</span>
						</p>
						<p class="mt-4 pt-2 mb-0 d-none d-sm-block">The story behind Detective James Gordon's rise to prominence in Gotham City in the years before Batman's arrival.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="hero-center-section">
			<div class="container">
				<div class="row justify-content-center">
					<div class="col-12 col-sm-5 col-md-5 col-xl-4 align-self-center">
						<div class="img-wrap">
							<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/4.jpg" alt="">
						</div>
					</div>
					<div class="col-12 col-sm-7 col-md-7 col-lg-5 col-xl-4 pl-4 align-self-center mt-4 mt-sm-0 text-center text-sm-left">
						<h3 class="mb-1">The Flash</h3>
						<p class="small mb-2 opacity-60">43min | Action, Adventure, Drama</p>
						<p class="mb-0">
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="color-yellow opacity-40"><i class='uil uil-star'></i></span>
							<span class="ml-1 ml-sm-3 size-18 color-yellow">7.9/10</span>
						</p>
						<p class="mt-4 pt-2 mb-0 d-none d-sm-block">After being struck by lightning, Barry Allen wakes up from his coma to discover he's been given the power of super speed, becoming the Flash, fighting crime in Central City.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="hero-left-section">
			<ul class="slide-buttons">
				<li class="hover-target">
				</li>
				<li class="hover-target">
				</li>
				<li class="hover-target">
				</li>
				<li class="hover-target">
				</li>
			</ul>
		</div>
	</div>
		
		<!-- Page cursor
		================================================== -->
		
        <div class='cursor' id="cursor"></div>
        <div class='cursor2' id="cursor2"></div>
        <div class='cursor3' id="cursor3"></div> 
		
	<!-- Link to page
	================================================== -->

	<a href="https://front.codes" class="link-to-page hover-target" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/logo-new.png" alt=""></a>
	
	<div class="bottom-right">								
		<div class="switch">
			<div class="circle hover-target"></div>
		</div>									
	</div>

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



--------CSS---------


/* Please ❀ this if you like it! */


@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext');


:root {
	--white: #ffffff;
	--black: #000000;
	--dark-blue: #1f2029;
	--dark-light: #424455;
	--red: #da2c4d;
	--yellow: #f8ab37;
	--grey: #ecedf3;
}

/* #Primary
================================================== */

body{
	width: 100%;
	height: 100vh;
	background: var(--dark-blue);
	overflow: hidden;
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 30px;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
p{
    font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 30px;
	color: var(--white);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
p.small{
	font-size: 12px;
	line-height: 18px;
	letter-spacing: 1px;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
    font-family: 'Poppins', sans-serif;
	margin-bottom: 0.6rem;	
	color: var(--white);
}
h3, .h3 {
	font-size: 38px;
	line-height: 48px;
	font-weight: 700;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
::selection {
	color: var(--white);
	background-color: var(--black);
}
::-moz-selection {
	color: var(--white);
	background-color: var(--black);
}
mark{
	color: var(--white);
	background-color: var(--black);
}
.color-yellow {
    color: var(--yellow);
}
.size-18{
    font-size: 18px;
}
.opacity-40{
	opacity: 0.4;
}
.opacity-60{
	opacity: 0.6;
}
.section {
    position: relative;
	width: 100%;
	display: block;
}
.over-hide {
    overflow: hidden;
}
.full-height {
	height: 100vh;
}
.hero-center-section{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: 100;
	transform: translateY(-60%);
	opacity: 0;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.hero-center-section.show{
	transform: translateY(-50%);
	opacity: 1;
}
.poster-transition.show{
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}
.z-bigger {
	z-index: 30 !important;
}

.img-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.25);
	display: block;
}
.img-wrap img {
	width: 100%;
	height: auto;
	display: block;
}

.hero-left-section{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 30px;
	z-index: 1000;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.slide-buttons{
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
.slide-buttons li{
	position: relative;
	display: block;
	margin: 15px 0;
	padding: 0;
	list-style: none;
	cursor: pointer;
	overflow: hidden;
	width: 50px;
	height: 50px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.slide-buttons li:after{
	position: absolute;
	display: block;
	border-radius: 4px;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-color: transparent;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.slide-buttons li.active{
	box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}
.slide-buttons li.active:after{
	background-color: rgba(20,20,20,.4);
}
.slide-buttons li:nth-child(1){
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/1.jpg');;
}
.slide-buttons li:nth-child(2){
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/2.jpg');;
}
.slide-buttons li:nth-child(3){
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/3.jpg');;
}
.slide-buttons li:nth-child(4){
	background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/4.jpg');;
}
/* #Cursor
================================================== */
.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.cursor{
	background-color: var(--white);
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid var(--white);
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}
.cursor2.hover{
	background: rgba(255,255,255,1);
	box-shadow: 0 0 0 rgba(255, 255, 255, 0.2);
}

.link-to-page {
	position: fixed;
    top: 30px;
    right: 30px;
    z-index: 20000;
    cursor: pointer;
    width: 30px;
}
.link-to-page img{
	width: 100%;
	height: auto;
	display: block;
}
.bottom-right{
	position: absolute;
	bottom: 50px;
	right: 30px;
	z-index: 1000;
}
.switch,
.circle {
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
} 
.switch {
	width: 80px;
	height: 4px;
	border-radius: 27px;
	background-image: linear-gradient(298deg, var(--red), var(--yellow));
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: 1;
	transform: translate(0);
    transition: all 300ms linear;
    transition-delay: 1900ms;
}
.circle {
	cursor: pointer;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--dark-light);
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.circle:before {
	position: absolute;
	font-family: 'unicons';
	content: '\eac1';
	top: 0;
	left: 0;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 100%;
	height: 40px;
	opacity: 1;
	color: var(--grey);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.circle:after {
	position: absolute;
	font-family: 'unicons';
	content: '\eb8f';
	top: 0;
	left: 0;
	z-index: 2;
	font-size: 20px;
	line-height: 40px;
	text-align: center;
	width: 100%;
	height: 40px;
	color: var(--yellow);
	opacity: 0;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}
.switched {
}
.switched .circle {
	left: 40px;
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: var(--dark);
}
.switched .circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}
.switched .circle:before {
	opacity: 0;
}
.switched .circle:after {
	opacity: 1;
}
body.light{
	background: var(--white);
}
body.light p{
	color: var(--dark-blue);
}
body.light h3{
	color: var(--dark);
}
body.light .cursor,
body.light .cursor2,
body.light .cursor3{
	mix-blend-mode: difference;
	z-index: 9999999;
}
body.light .cursor{
	background-color: var(--dark-blue);
}
body.light .cursor2{
	border: 2px solid var(--dark-blue);
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
}
body.light .cursor2.hover{
	background: rgba(0,0,0,1);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 991px) { 
	.hero-center-section{
		left: 50px;
		width: calc(100% - 50px);
	}
	.hero-left-section{
		left: 20px;
	}
	.slide-buttons li{
		width: 30px;
		height: 30px;
	}
}

@media (max-width: 767px) {
	h3, .h3 {
		font-size: 26px;
		line-height: 34px;
	}
  .cursor,
  .cursor2,
  .cursor3{
    display: none;
  }
}

@media (max-width: 575px) {
	h3, .h3 {
		font-size: 22px;
		line-height: 30px;
	}
}



-------JS--------


/* Please ❀ this if you like it! */


(function ($) {"use strict";

  //Page cursors

  document.getElementsByTagName("body")[0].addEventListener("mousemove", function (n) {
    t.style.left = n.clientX + "px",
    t.style.top = n.clientY + "px",
    e.style.left = n.clientX + "px",
    e.style.top = n.clientY + "px",
    i.style.left = n.clientX + "px",
    i.style.top = n.clientY + "px";
  });
  var t = document.getElementById("cursor"),
  e = document.getElementById("cursor2"),
  i = document.getElementById("cursor3");
  function n(t) {
    e.classList.add("hover"), i.classList.add("hover");
  }
  function s(t) {
    e.classList.remove("hover"), i.classList.remove("hover");
  }
  s();
  for (var r = document.querySelectorAll(".hover-target"), a = r.length - 1; a >= 0; a--) {
    o(r[a]);
  }
  function o(t) {
    t.addEventListener("mouseover", n), t.addEventListener("mouseout", s);
  }

  var pos = 0;
  if ($(window).width() > 1200) {
    window.setInterval(function () {
      pos++;
      document.getElementsByClassName('moving-image')[0].style.backgroundPosition = pos + "px 0px";
    }, 18);

  };


  //Switch light/dark

  $(".switch").on('click', function () {
    if ($("body").hasClass("light")) {
      $("body").removeClass("light");
      $(".switch").removeClass("switched");
    } else
    {
      $("body").addClass("light");
      $(".switch").addClass("switched");
    }
  });

  $(document).ready(function () {

    /* Hero Case study images */

    $('.slide-buttons li:nth-child(1)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(1)').addClass("show");
      $('.slide-buttons li:nth-child(1)').addClass('active');
    });
    $('.slide-buttons li:nth-child(2)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(2)').addClass("show");
      $('.slide-buttons li:nth-child(2)').addClass('active');
    });
    $('.slide-buttons li:nth-child(3)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(3)').addClass("show");
      $('.slide-buttons li:nth-child(3)').addClass('active');
    });
    $('.slide-buttons li:nth-child(4)').on('mouseenter', function () {
      $('.slide-buttons li.active').removeClass('active');
      $('.hero-center-section.show').removeClass("show");
      $('.hero-center-section:nth-child(4)').addClass("show");
      $('.slide-buttons li:nth-child(4)').addClass('active');
    });
    $('.slide-buttons li:nth-child(1)').trigger('mouseenter');

  });

})(jQuery);
//# sourceURL=pen.js

23. By Alexis Prevost-Maynen

Made by Alexis Prevost-Maynen. Infinite slider with SCSS & jQuery. Source

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>

	<div class="wrapper">
		<div class="slider right">
			
			<div class="arrow left">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.359 292.359">
					<path d="M222.979 5.424C219.364 1.807 215.08 0 210.132 0c-4.949 0-9.233 1.807-12.848 5.424L69.378 133.331c-3.615 3.617-5.424 7.898-5.424 12.847s1.809 9.233 5.424 12.847l127.906 127.907c3.614 3.617 7.898 5.428 12.848 5.428 4.948 0 9.232-1.811 12.847-5.428 3.617-3.614 5.427-7.898 5.427-12.847V18.271c-.001-4.949-1.81-9.229-5.427-12.847z" fill="#FFFFFF"/>
				</svg>
			</div>

			<div class="container-images">
				<img class="active" src="https://picsum.photos/600/400/?image=661">
				<img src="https://picsum.photos/600/400/?image=57">
				<img src="https://picsum.photos/600/400/?image=976">
				<img src="https://picsum.photos/600/400/?image=476">
        <img src="https://picsum.photos/600/400/?image=47">
        <img src="https://picsum.photos/600/400/?image=46">
			</div>

			<div class="arrow right">
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 292.359 292.359">
					<path d="M222.979 5.424C219.364 1.807 215.08 0 210.132 0c-4.949 0-9.233 1.807-12.848 5.424L69.378 133.331c-3.615 3.617-5.424 7.898-5.424 12.847s1.809 9.233 5.424 12.847l127.906 127.907c3.614 3.617 7.898 5.428 12.848 5.428 4.948 0 9.232-1.811 12.847-5.428 3.617-3.614 5.427-7.898 5.427-12.847V18.271c-.001-4.949-1.81-9.229-5.427-12.847z" fill="#FFFFFF"/>
				</svg>
			</div>

		</div>
	</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
</body>
</html>



---------CSS----------


body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ee0979;
  background: -webkit-linear-gradient(to right, #ff6a00, #ee0979);
  background: linear-gradient(to right, #ff6a00, #ee0979);
  width: 100vw;
  height: 100vh;
}

.wrapper {
  padding: 100px 0;
  width: 550px;
}

.slider {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slider .arrow {
  cursor: pointer;
  width: 50px;
}
.slider .arrow:hover {
  opacity: 0.8;
}
.slider .arrow.right {
  transform: rotate(180deg);
}
.slider .container-images {
  position: relative;
  width: 400px;
  height: 250px;
  overflow: hidden;
  -webkit-box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 61px -10px rgba(0, 0, 0, 0.75);
}
.slider .container-images img {
  width: 100%;
  position: absolute;
  top: 50%;
  transition-duration: 0.5s;
  transform: translateY(-50%);
}
.slider.right .container-images img {
  left: -100%;
  z-index: -1;
}
.slider.right .container-images img.active {
  z-index: 1;
  left: 0;
}
.slider.right .container-images img.to_right {
  left: 100%;
}
.slider.left .container-images img {
  right: -100%;
  z-index: -1;
}
.slider.left .container-images img.active {
  z-index: 1;
  right: 0;
}
.slider.left .container-images img.to_left {
  right: 100%;
}



--------JS----------


$(window).on('load', function () {

  let nbImg = 0;
  $('.slider .container-images img').each(function () {
    nbImg += 1;
  });

  $('.slider .arrow').click(function () {
    let n = imageActive();

    $('.slider').removeClass('right left');

    if ($(this).hasClass('left')) {
      n -= 1;
      $('.slider').addClass('left');
      setTimeout(function () {
        $('.slider .container-images img.active').addClass('to_left');
      }, 50);
    } else
    if ($(this).hasClass('right')) {
      n += 1;
      $('.slider').addClass('right');
      setTimeout(function () {
        $('.slider .container-images img.active').addClass('to_right');
      }, 50);
    }

    if (n > nbImg) n = 1;
    if (n < 1) n = nbImg;

    setTimeout(function () {
      $('.slider .container-images img').removeClass('active');
      $('.slider .container-images img:nth-child(' + n + ')').addClass('active');

      setTimeout(function () {
        $('.slider .container-images img').removeClass('to_left');
        $('.slider .container-images img').removeClass('to_right');
      }, 500);
    }, 50);
  });

  function imageActive() {
    let n = 1;
    $('.slider .container-images img').each(function (index) {
      if ($(this).hasClass('active')) {
        n += index;
      }
    });
    return n;
  }

});

24. By Olivia Ng

Made by Olivia Ng. Slider Animations: Pies from the Waitress Musical. Source

  <link href="https://fonts.googleapis.com/css?family=Playfair+Display:400i|Raleway:400,900" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css'>
  
  <div class="main-content">
  <div class="recipe-wrapper">
    <div class="navigation"><i class="js-navigate js-left disabled icon-arrow-left-circle icons"></i><i class="js-navigate js-right icon-arrow-right-circle icons"></i></div>
    <div class="recipe-image">
      <div class="recipe active"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/WakeUpAndSmellCoffeePie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/LifesARockyRoadPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/PeachyKeenPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/WhiskWayPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/KeyToHappinessPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/GettingOutOfMudPie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/ApplePie.png"/></div>
      <div class="recipe"><img class="pie-photo" src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/Waitress/ThanksForTakingMePie.png"/></div>
    </div>
    <div class="recipe-content">
      <div class="recipe active blue">
        <div class="recipe-page">1/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Wake Up and Smell the Coffee Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Coffee cream pie. This one’ll give you extra reason to get out of bed in the morning.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe">
        <div class="recipe-page">2/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Life's A Rocky Road Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes 12 (4-ounce) pies</p>
          </div>
          <div class="pie-context">Rocky road macadamia mousse pies with white chocolate chips.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe orange">
        <div class="recipe-page">3/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Life's Just Peachy Peachy Keen Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Polka-Dot Peach Pie, bursting with sugar and sunshine.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe yellow">
        <div class="recipe-page">4/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">When There's A Whisk, There's A Way Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Lemon meringue pie. When life gives you lemons, bake them up in a pie.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe green">
        <div class="recipe-page">5/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Key (Lime) to Happiness Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Key lime pie, with a taste of tequila for extra happiness.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe brown">
        <div class="recipe-page">6/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Getting Out of the Mud Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Frozen mud pie, made with an avalanche of ice-cream topped with chocolate fudge.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe red">
        <div class="recipe-page">7/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">The Apple of My Eye Rum Raisin Pies</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes 6 hand pies</p>
          </div>
          <div class="pie-context">Creamy inside with sharp bursts of sweetness from the raisins and apples.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
      <div class="recipe pink">
        <div class="recipe-page">8/8</div>
        <div class="recipe-content-inner">
          <h1 class="pie-name">Thanks For Taking Me To The Moon Pie</h1>
          <div class="pie-serving">
            <svg x="0px" y="0px" viewBox="0 0 463 463">
              <g>
                <path d="M463,223.5c0-12.958-10.542-23.5-23.5-23.5c-2.071,0-4.028,0.115-5.904,0.303c-0.666-0.194-1.368-0.303-2.097-0.303   c-10.792,0-27.144-9.703-46.077-20.938C349.109,157.513,299.375,128,231.5,128s-117.609,29.513-153.923,51.062   C58.644,190.297,42.292,200,31.5,200c-0.729,0-1.432,0.109-2.098,0.303C27.527,200.115,25.571,200,23.5,200   C10.542,200,0,210.542,0,223.5c0,12.742,10.196,23.141,22.857,23.484l28.668,57.337c9.461,18.924,28.482,30.68,49.64,30.68h260.669   c21.157,0,40.179-11.756,49.641-30.68l28.668-57.337C452.804,246.642,463,236.242,463,223.5z M85.231,191.961   C120.052,171.299,167.74,143,231.5,143s111.448,28.299,146.269,48.961c11.706,6.946,22.083,13.101,31.5,17.299   c-1.875,1.28-3.509,2.527-4.918,3.609c-4.073,3.13-4.073,3.13-6.495,3.13c-2.426,0-2.426,0-6.506-3.136   C385.086,208.053,374.603,200,356.208,200c-18.393,0-28.872,8.057-35.135,12.872C317.005,216,317.005,216,314.59,216   c-2.399,0-2.399,0-6.462-3.127C301.87,208.058,291.396,200,273.008,200c-18.382,0-28.855,8.051-35.13,12.874   C233.817,216,233.817,216,231.406,216c-2.407,0-2.407,0-6.466-3.124C218.681,208.06,208.204,200,189.813,200   s-28.868,8.06-35.129,12.877C150.625,216,150.625,216,148.219,216c-2.403,0-2.403,0-6.466-3.127   C135.495,208.058,125.021,200,106.629,200c-18.395,0-28.866,8.061-35.127,12.881C67.45,216,67.45,216,65.055,216   c-2.391,0-2.391,0-6.438-3.117c-1.405-1.083-3.036-2.331-4.908-3.613C63.132,205.073,73.516,198.913,85.231,191.961z    M398.059,297.613C391.154,311.422,377.273,320,361.834,320H101.166c-15.439,0-29.319-8.579-36.224-22.388L45.94,259.61   c5.18,1.981,11.451,3.39,19.115,3.39c18.391,0,28.862-8.061,35.117-12.877C104.23,247,104.23,247,106.629,247   c2.407,0,2.407,0,6.47,3.127c6.258,4.815,16.732,12.873,35.12,12.873c18.392,0,28.868-8.06,35.129-12.877   c4.058-3.123,4.058-3.123,6.465-3.123s2.407,0,6.466,3.124c6.26,4.816,16.736,12.876,35.128,12.876   c18.382,0,28.855-8.051,35.13-12.874c4.061-3.126,4.061-3.126,6.472-3.126c2.403,0,2.403,0,6.46,3.123   C285.724,254.939,296.195,263,314.59,263c18.393,0,28.872-8.057,35.135-12.872c4.067-3.128,4.067-3.128,6.482-3.128   c2.426,0,2.426,0,6.506,3.136C368.977,254.948,379.46,263,397.856,263c7.712,0,14.018-1.424,19.221-3.423L398.059,297.613z    M439.5,232c-2.58,0-4.67,0.314-6.5,0.865c-0.053,0.017-0.107,0.03-0.16,0.048c-3.425,1.066-5.934,2.984-8.988,5.33   c-5.36,4.118-12.701,9.757-25.997,9.757c-13.299,0-20.643-5.641-26.009-9.763c-4.711-3.621-8.116-6.237-15.639-6.237   c-7.516,0-10.918,2.617-15.626,6.238c-5.358,4.12-12.697,9.762-25.991,9.762c-13.29,0-20.62-5.643-25.973-9.764   c-4.704-3.621-8.103-6.236-15.609-6.236c-7.516,0-10.916,2.618-15.63,6.247c-5.355,4.116-12.688,9.753-25.972,9.753   c-13.289,0-20.625-5.644-25.98-9.764c-4.704-3.621-8.103-6.236-15.613-6.236s-10.909,2.616-15.612,6.235   c-5.356,4.121-12.692,9.765-25.981,9.765c-13.285,0-20.619-5.642-25.977-9.764c-4.704-3.621-8.103-6.236-15.613-6.236   c-7.503,0-10.901,2.616-15.606,6.237C85.67,242.357,78.34,248,65.055,248c-13.288,0-20.613-5.644-25.973-9.774   c-3.029-2.331-5.522-4.239-8.915-5.305c-0.055-0.019-0.111-0.033-0.167-0.05c-1.83-0.555-3.918-0.871-6.5-0.871   c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5c13.288,0,20.613,5.644,25.963,9.767c4.699,3.619,8.095,6.233,15.592,6.233   c7.499,0,10.895-2.614,15.603-6.237c5.352-4.12,12.682-9.763,25.972-9.763c13.289,0,20.623,5.642,25.98,9.764   c4.704,3.621,8.103,6.236,15.609,6.236c7.511,0,10.909-2.616,15.612-6.235c5.356-4.121,12.692-9.765,25.981-9.765   s20.625,5.644,25.98,9.764c4.704,3.621,8.103,6.236,15.613,6.236c7.516,0,10.916-2.618,15.63-6.247   c5.355-4.116,12.688-9.753,25.972-9.753c13.285,0,20.619,5.642,25.977,9.764c4.705,3.62,8.104,6.236,15.606,6.236   c7.516,0,10.918-2.617,15.626-6.238c5.358-4.12,12.697-9.762,25.991-9.762c13.299,0,20.643,5.641,26.009,9.764   c4.711,3.621,8.116,6.236,15.639,6.236c7.52,0,10.924-2.616,15.644-6.243c5.36-4.118,12.701-9.757,26-9.757   c4.687,0,8.5,3.813,8.5,8.5S444.188,232,439.5,232z"></path>
                <path d="M231.5,199c4.142,0,7.5-3.358,7.5-7.5v-24c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v24   C224,195.642,227.358,199,231.5,199z"></path>
                <path d="M274.197,188.803c1.464,1.464,3.384,2.197,5.303,2.197s3.839-0.732,5.303-2.197c2.929-2.929,2.929-7.678,0-10.606l-16-16   c-2.929-2.929-7.678-2.929-10.606,0c-2.929,2.929-2.929,7.678,0,10.606L274.197,188.803z"></path>
                <path d="M183.5,191c1.919,0,3.839-0.732,5.303-2.197l16-16c2.929-2.929,2.929-7.678,0-10.606c-2.929-2.929-7.678-2.929-10.606,0   l-16,16c-2.929,2.929-2.929,7.678,0,10.606C179.661,190.268,181.581,191,183.5,191z"></path>
              </g>
            </svg>
            <p>Makes one 9Β½-inch pie</p>
          </div>
          <div class="pie-context">Peanut butter cream topped with whipped cream and MoonPies.</div>
          <div class="pie-cta">See recipe</div>
        </div>
      </div>
    </div>
  </div>
</div>
<aside class="context">
  <div class="explanation">
     πŸ₯§ Pies from the <a href="https://waitressthemusical.com" target="_blank">Waitress Musical </a>πŸ₯§<br/>Check out the <a href="https://codepen.io/oliviale/full/GPXozx" target="_blank">recipe layout here.</a></div>
</aside>
<footer><a href="https://twitter.com/meowlivia_" target="_blank"><i class="icon-social-twitter icons"></i></a><a href="https://github.com/oliviale" target="_blank"><i class="icon-social-github icons"></i></a><a href="https://dribbble.com/oliviale" target="_blank"><i class="icon-social-dribbble icons"></i></a></footer>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>




--------CSS--------



body {
  background: #3a506b;
  font-family: "Raleway";
}

.main-content {
  max-width: 800px;
  margin: 5em auto 3em;
  position: relative;
  padding: 3em;
}

:root {
  --color: coral;
}

.blue {
  --color: #08b2e3;
}

.yellow {
  --color: #edae49;
}

.orange {
  --color: #f18805;
}

.green {
  --color: #76b041;
}

.brown {
  --color: #916953;
}

.red {
  --color: #e3655b;
}

.pink {
  --color: #ec318c;
}

.recipe-wrapper {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  box-shadow: 0 15px 35px rgba(50, 50, 93, 0.1), 0 5px 15px rgba(0, 0, 0, 0.07);
  align-self: stretch;
}
.recipe-wrapper .recipe-image {
  flex: 4;
  overflow: hidden;
  position: relative;
  background: #fcfcfc;
}
.recipe-wrapper .pie-photo {
  max-width: 150%;
  position: absolute;
  right: 0;
  bottom: 120%;
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
}
.recipe-wrapper .recipe-content {
  background: #fff;
  flex: 5;
  padding: 7%;
  text-align: center;
  min-height: 400px;
  overflow: hidden;
  position: relative;
}
.recipe-wrapper .navigation {
  position: absolute;
  right: -10px;
  top: 60px;
  font-size: 30px;
  text-align: center;
  color: #fff;
}
.recipe-wrapper .navigation i {
  margin: 8px;
  display: block;
  opacity: 0.6;
  cursor: pointer;
}
.recipe-wrapper .navigation i:hover {
  opacity: 1;
}
.recipe-wrapper .navigation i.disabled {
  opacity: 0.2;
  pointer-events: none;
}
.recipe-wrapper .recipe-page {
  font: 400 28px "Playfair Display", cursive;
  position: absolute;
  top: 10px;
  right: 20px;
  color: #999;
  opacity: 0;
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
}
.recipe-wrapper .recipe-content-inner {
  transition: all 600ms cubic-bezier(1, 0, 0, 1);
  top: 150%;
  position: absolute;
  left: 0;
  margin: 0 10%;
  right: 0;
}

.recipe.active .recipe-page {
  opacity: 1;
}
.recipe.active .pie-photo {
  bottom: -5%;
}
.recipe.active .recipe-content-inner {
  top: 12%;
}

.pie-name {
  font: 900 35px Raleway;
  text-transform: uppercase;
  margin: 20px 0 5px;
  letter-spacing: 2px;
  color: var(--color);
  position: relative;
}
.pie-name:before {
  content: "";
  position: absolute;
}

.pie-context {
  font: 400 18px/1.3 "Raleway";
  color: #999;
  margin: 40px 20px;
}

.pie-serving {
  font: 400 16px Raleway;
  color: var(--color);
  border: 0.5px solid var(--color);
  border-width: 0.5px 0;
  margin: 20px auto;
  max-width: 300px;
}
.pie-serving svg {
  width: 40px;
}
.pie-serving svg path {
  fill: var(--color);
}
.pie-serving p {
  display: inline-block;
  vertical-align: top;
  margin: 12px 6px 6px;
}

.pie-cta {
  display: block;
  padding: 15px;
  border-radius: 40px;
  background: var(--color);
  max-width: 180px;
  font-size: 20px;
  color: #fff;
  position: relative;
  margin: auto;
  top: 0;
  transition: all 200ms cubic-bezier(0.77, 0, 0.175, 1);
}
.pie-cta:hover {
  top: -5px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

aside.context {
  text-align: center;
  color: #fff;
  line-height: 2;
}
aside.context a {
  text-decoration: none;
  color: #fff;
  padding: 3px 0;
  border-bottom: 1px dashed;
}
aside.context a:hover {
  border-style: solid;
}
aside.context .explanation {
  max-width: 700px;
  margin: 2em auto;
}

footer {
  text-align: center;
  margin: 5em auto;
  width: 100%;
}
footer a {
  text-decoration: none;
  display: inline-block;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: transparent;
  border: 1px dashed #fff;
  color: #fff;
  margin: 5px;
}
footer a:hover {
  background: rgba(255, 255, 255, 0.1);
}
footer a .icons {
  margin-top: 12px;
  display: inline-block;
  font-size: 20px;
}

@media (max-width: 750px) {
  .recipe-wrapper .pie-photo {
    max-width: 180%;
  }
}
/* For Mobile
@media (max-width: 750px) {
  .recipe-wrapper {
    .recipe-image, .recipe-content {
      flex: 1 1 100%;
    }
    .recipe-image {
      height: 300px;
    }
    .pie-photo {
      max-width: 100%;
    }
  }

  .recipe.active .pie-photo {
      bottom: -30%;
  }
}


@media (max-width: 500px) {
  .recipe-wrapper .recipe-content {
    min-height: 550px; 
  }

}
*/



------JS------



$(".js-navigate").on("click", function () {
  $(".js-navigate").removeClass("disabled");
  var current = $(".recipe.active");
  var findNext = $(current).next(".recipe");
  var findPrev = $(current).prev(".recipe");
  var button = $(this);

  $(current).removeClass("active");
  setTimeout(function () {
    if ($(button).hasClass("js-right")) {
      $(findNext).addClass("active");
      checkForDisable();
    } else if ($(button).hasClass("js-left")) {
      $(findPrev).addClass("active");
      checkForDisable();
    }
  }, 300);
});

function checkForDisable() {
  var current = $(".recipe.active");
  if ($(current).is(".recipe:last")) {
    $(".js-right").addClass("disabled");
  } else if ($(current).is(".recipe:first")) {
    $(".js-left").addClass("disabled");
  }
}

25. By Jamie Coulter

Made by Jamie Coulter. Split Slider / Showcase Portfolio with reveal in CSS only. An amazing jQuery & CSS Slider with sliding animations. Source

<blink></blink>
<div class='split'>
  <div class='split_frame'></div>
  <input class='trig' id='triggerInner1' name='triggerInner' type='checkbox'>
  <input class='trig' id='triggerInner2' name='triggerInner' type='checkbox'>
  <input class='trig' id='triggerInner3' name='triggerInner' type='checkbox'>
  <input class='trig' id='triggerInner4' name='triggerInner' type='checkbox'>
  <input class='trig' id='triggerInner5' name='triggerInner' type='checkbox'>
  <input class='trig' id='triggerInner6' name='triggerInner' type='checkbox'>
  <input class='trig' id='triggerInner7' name='triggerInner' type='checkbox'>
  <input id='trigger1' name='trigger' type='radio'>
  <input id='trigger2' name='trigger' type='radio'>
  <input id='trigger3' name='trigger' type='radio'>
  <input id='trigger4' name='trigger' type='radio'>
  <input id='trigger5' name='trigger' type='radio'>
  <input id='trigger6' name='trigger' type='radio'>
  <input id='trigger7' name='trigger' type='radio'>
  <div class='split_triggers'>
    <label class='logo' for='trigger1'>
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/newlogo.png'>
    </label>
    <h3>
      Explore projects
      <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rightArrowNew.png'>
    </h3>
    <label for='trigger2'>The Mine</label>
    <label for='trigger3'>CodePen Simulator</label>
    <label for='trigger4'>CSS Solar System</label>
    <label for='trigger5'>Poetry in CSS</label>
    <label for='trigger6'>Reaction</label>
    <label for='trigger7'>Demolition Man</label>
    <div class='social'>
      <a href='https://www.codepen.io/jcoulterdesign' target='_blank'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/codepenSocial.png'>
      </a>
      <a href='https://www.twitter.com/jamiecoulter89' target='_blank'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/twitterSocialPortfolio.png'>
      </a>
    </div>
  </div>
  <div class='split_left'>
    <div class='split_left__slide slide' style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/demomanbg.png'), #001013">
      <div class='content' style='text-align: center;'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/demolition-man.png'>
      </div>
    </div>
    <div class='split_left__slide slide' style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/reactionportrprev.png'), #020104">
      <div class='content' style='text-align: center;'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/theMineLogoPortfolio.png'>
      </div>
    </div>
    <div class='split_left__slide slide' style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/poetryportbg.png'), #272118">
      <div class='content' style='text-align: center;'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/po3.png'>
      </div>
    </div>
    <div class='split_left__slide slide' style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cssssepreview.png'), #0d0b15">
      <div class='content' style='text-align: center;'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/SOLARLOGO.png'>
      </div>
    </div>
    <div class='split_left__slide slide' style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/codepenLifePreviedw.png'), #070f15">
      <div class='content' style='text-align: center;'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/cpslogo.png'>
      </div>
    </div>
    <div class='split_left__slide slide' style="background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/minepreviewportfolio.png'), #17100f">
      <div class='content' style='text-align: center;'>
        <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/theMineLogoPortfolio.png'>
      </div>
    </div>
    <div class='split_left__slide slide'>
      <div class='content'>
        <h1>Jamie Coulter</h1>
        <h2>Digital Designer &amp; Front End Developer</h2>
        <p>A showcase built using only CSS. Featuring a selection of CodePen projects, experiments and other Tom Foolery.</p>
        <a href="/cdn-cgi/l/email-protection#1e3e747d716b726a7b6c7a7b6d7779705e79737f7772307d7173">Need something doing?</a>
      </div>
    </div>
  </div>
  <div class='split_right'>
    <div class='split_right__slide slide'>
      <div class='content'>
        <h2>Oh. Hello there.</h2>
        <p>I'm Jamie. A Leeds based, multi-disciplined Front end developer &amp; Digital designer. From branding and print, to un-forgettable digital experiences, i’ve got you covered buddy.</p>
        <label for='trigger2'>Groovy, what's first?</label>
      </div>
    </div>
    <div class='split_right__slide slide' style='background: #2b1a17'>
      <div class='content'>
        <h2 style='color: #ff9614'>The Mine: No JS, CSS only adventure game</h2>
        <p>My contribution to the Codepen Halloween challenge. Lot's of stuff going on here. The concept initially started off as a simple 'Walk down a corridor and avoid traps' game, but it just kinda escalated from there. I decided i wanted to go up and down, solve puzzles etc.</p>
        <label class='lab' data-iframe='NOMeEb' for='triggerInner1' style='animation: button0 1s infinite; color:#17100f; background: #ff9614'>Let's have a look</label>
      </div>
    </div>
    <div class='split_right__slide slide' style='background: #17252f'>
      <div class='content'>
        <h2 style='color: #03f4d3'>CodePenLife: The CodePen Simulation Game</h2>
        <p>See how many codepen followers you can get it one year. Type randomly to create new pens (or click auto if you are lazy). Use your followers to purchase new research which will boost your stat levels (and therefore your pen quality). If your pens are good enough, they will get featured! GLHF. All art was created by me pixel by pixel (Which is why it doesnt look great, go easy guys, im no pixel artist!) Code could certainly be better, i've used jQuery (though i could have just done this vanilla as i havent really used any of its features)</p>
        <label class='lab' data-iframe='YvgpZW' for='triggerInner2' style='animation: button1 1s infinite; color:#070f15; background: #03f4d3'>Let's have a look</label>
      </div>
    </div>
    <div class='split_right__slide slide' style='background: #1e0c29'>
      <div class='content'>
        <h2 style='color: #ae2dff'>Solar Explorer in CSS only</h2>
        <p>Explore the planets and moons of our solar in pure CSS. Not a single line of JS used throughout, only images are planet textures taken from royalty free sites. Information about planets taken from space.com. This works on  opera but is super jerky, Firefox has some issues with z-index.</p>
        <label class='lab' data-iframe='ZxXbeP' for='triggerInner3' style='animation: button2 1s infinite; color:#0d0b15; background: #ae2dff'>Let's have a look</label>
      </div>
    </div>
    <div class='split_right__slide slide' style='background: #967954'>
      <div class='content'>
        <h2 style='color: #efc053;'>Poetry in CSS</h2>
        <p>This is my submission to the Dead Poets Society CodePenChallenge. I decided to do 6 animations to my favorite poems, mostly in CSS although the rain and grain filter are not.</p>
        <label class='lab' data-iframe='MVyOoZ' for='triggerInner4' style='animation: button3 1s infinite; color:#272118; background: #efc053;'>Let's have a look</label>
      </div>
    </div>
    <div class='split_right__slide slide' style='background: #0d0c10'>
      <div class='content'>
        <h2 style='color: #ff6c00'>Reaction: A fast based Javascript browser game.</h2>
        <p>This has been my baby for a while now. Contains audio. Power the reaction bar before the time runs out by clicking on the lit nodes before they decay. The faster you get the nodes, the more charge will be added to the reaction bar. Collect power ups and get combos with continuous successful hits.</p>
        <label class='lab' data-iframe='XdYxMJ' for='triggerInner5' style='animation: button4 1s infinite; color:#020104; background: #ff6c00'>Let's have a look</label>
      </div>
    </div>
    <div class='split_right__slide slide' style='background: #458276'>
      <div class='content'>
        <h2 style='color: #40ffd9'>A Pure CSS replica of the menu UI seen in 1993s Demolition Man</h2>
        <p>Today 80's / 90's movie recreated UI piece in CSS is taken from Demolition Man 1993. During the scene where they use a computer to find Simon around the 20 minute mark.</p>
        <label class='lab' data-iframe='qYJWyq' for='triggerInner6' style='animation: button5 1s infinite; color:#001013; background: #40ffd9'>Let's have a look</label>
      </div>
    </div>
  </div>
</div>
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>



-----------CSS-------------




@import url("https://fonts.googleapis.com/css?family=Lato:100,200,300,400,700,900");
body {
  margin: 0;
  overflow: hidden;
  background: #1e1c21;
  font-family: "Lato", sans-serif;
}
body input {
  display: none;
  position: relative;
  z-index: 10;
}
body input[type=checkbox] {
  -webkit-appearance: none;
  position: absolute;
  bottom: -42px;
  left: 88px;
  cursor: pointer;
  outline: none;
  display: block;
  transition: all 0.3s 0s;
  visibility: hidden;
}
body input[type=checkbox]:checked {
  bottom: 21px;
  visibility: visible;
  transition: all 0.6s 0.75s;
}
body input[type=checkbox]:nth-of-type(1):checked:after {
  color: #ff9614;
}
body input[type=checkbox]:nth-of-type(2):checked:after {
  color: #03f4d3;
}
body input[type=checkbox]:nth-of-type(3):checked:after {
  color: #ae2dff;
}
body input[type=checkbox]:nth-of-type(4):checked:after {
  color: #efc053;
}
body input[type=checkbox]:nth-of-type(5):checked:after {
  color: #ff6c00;
}
body input[type=checkbox]:nth-of-type(6):checked:after {
  color: #40ffd9;
}
body input[type=checkbox]:after {
  outline: none;
  color: #de1663;
  font-family: "lato";
  float: left;
  position: relative;
  margin-left: 30px;
  margin-right: 20px;
  font-size: 14px;
  font-weight: 600 !important;
  position: relative;
  top: -8px;
  content: "Go back ";
  transition: color 0.1s 0.8s;
}
body input[type=checkbox]:before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/rightArrowNew.png);
  width: 15px;
  transform: rotate(180deg);
  height: 30px;
  content: "";
  top: -13px;
  width: 15px;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  position: absolute;
}
body input[type=checkbox]:before img {
  width: 15px;
}
body h1,
body h2 {
  margin: 0;
}
body h1 {
  color: white;
  font-weight: 800 !important;
  font-size: 28px;
  margin-bottom: 5px;
}
body a {
  display: block;
  background: white;
  text-decoration: none;
  font-size: 14px;
  float: left;
  text-align: center;
  padding: 12px 30px 14px 30px;
  margin-top: 10px;
  border: 0;
  font-weight: 700 !important;
  outline: 0;
  color: #5e0e2c;
  cursor: pointer;
}
body h2 {
  color: #de1663;
  font-weight: 500 !important;
  font-size: 21px;
}
body p {
  color: white;
  font-weight: 500 !important;
  line-height: 24px;
  font-size: 14px;
  margin-top: 20px;
}
body iframe {
  border: 0;
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  height: calc(100vh - 83px);
  transition: all 1s 1s;
}

@-webkit-keyframes button0 {
  0% {
    box-shadow: 0 0 0px #ff9614;
  }
  50% {
    box-shadow: 0 0 16px #ff9614;
  }
  100% {
    box-shadow: 0 0 0px #ff9614;
  }
}

@keyframes button0 {
  0% {
    box-shadow: 0 0 0px #ff9614;
  }
  50% {
    box-shadow: 0 0 16px #ff9614;
  }
  100% {
    box-shadow: 0 0 0px #ff9614;
  }
}
@-webkit-keyframes button1 {
  0% {
    box-shadow: 0 0 0px #03f4d3;
  }
  50% {
    box-shadow: 0 0 16px #03f4d3;
  }
  100% {
    box-shadow: 0 0 0px #03f4d3;
  }
}
@keyframes button1 {
  0% {
    box-shadow: 0 0 0px #03f4d3;
  }
  50% {
    box-shadow: 0 0 16px #03f4d3;
  }
  100% {
    box-shadow: 0 0 0px #03f4d3;
  }
}
@-webkit-keyframes button2 {
  0% {
    box-shadow: 0 0 0px #ae2dff;
  }
  50% {
    box-shadow: 0 0 16px #ae2dff;
  }
  100% {
    box-shadow: 0 0 0px #ae2dff;
  }
}
@keyframes button2 {
  0% {
    box-shadow: 0 0 0px #ae2dff;
  }
  50% {
    box-shadow: 0 0 16px #ae2dff;
  }
  100% {
    box-shadow: 0 0 0px #ae2dff;
  }
}
@-webkit-keyframes button3 {
  0% {
    box-shadow: 0 0 0px #efc053;
  }
  50% {
    box-shadow: 0 0 16px #efc053;
  }
  100% {
    box-shadow: 0 0 0px #efc053;
  }
}
@keyframes button3 {
  0% {
    box-shadow: 0 0 0px #efc053;
  }
  50% {
    box-shadow: 0 0 16px #efc053;
  }
  100% {
    box-shadow: 0 0 0px #efc053;
  }
}
@-webkit-keyframes button4 {
  0% {
    box-shadow: 0 0 0px #ff6c00;
  }
  50% {
    box-shadow: 0 0 16px #ff6c00;
  }
  100% {
    box-shadow: 0 0 0px #ff6c00;
  }
}
@keyframes button4 {
  0% {
    box-shadow: 0 0 0px #ff6c00;
  }
  50% {
    box-shadow: 0 0 16px #ff6c00;
  }
  100% {
    box-shadow: 0 0 0px #ff6c00;
  }
}
@-webkit-keyframes button5 {
  0% {
    box-shadow: 0 0 0px #40ffd9;
  }
  50% {
    box-shadow: 0 0 16px #40ffd9;
  }
  100% {
    box-shadow: 0 0 0px #40ffd9;
  }
}
@keyframes button5 {
  0% {
    box-shadow: 0 0 0px #40ffd9;
  }
  50% {
    box-shadow: 0 0 16px #40ffd9;
  }
  100% {
    box-shadow: 0 0 0px #40ffd9;
  }
}
@-webkit-keyframes button6 {
  0% {
    box-shadow: 0 0 0px;
  }
  50% {
    box-shadow: 0 0 16px;
  }
  100% {
    box-shadow: 0 0 0px;
  }
}
@keyframes button6 {
  0% {
    box-shadow: 0 0 0px;
  }
  50% {
    box-shadow: 0 0 16px;
  }
  100% {
    box-shadow: 0 0 0px;
  }
}
.split_frame {
  height: calc(100% - 0);
  width: calc(100% - 0);
  border: 0 solid white;
  position: fixed;
  z-index: 1;
  pointer-events: none;
}
.split #trigger1:checked + input + input + input + input + input + input + div + div {
  top: -600vh;
  left: -100px;
}
.split #trigger1:checked + input + input + input + input + input + input + div + div + div {
  top: 0vh;
  right: -200px;
}
.split #trigger1:checked + input + input + input + input + input + input + div h3 {
  color: #de1663;
}
.split #trigger1:checked + input + input + input + input + input + input + div > label:nth-of-type(1) {
  color: #de1663;
  font-weight: 600 !important;
}
.split #trigger1:checked + input + input + input + input + input + input + div > label:nth-of-type(1)::after {
  width: calc(100% - 40px);
  background: #de1663;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner1:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div + div {
  top: -600vh;
  left: calc(-100% - (100px)) !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div + div + div {
  top: 0vh;
  right: calc(-100% - (100px)) !important;
}
.split #triggerInner1:checked + input + input + input + input + input + input + input + input + input + input + input + input + input + div + div + div + iframe {
  z-index: 0;
  opacity: 1;
}
.split #trigger2:checked + input + input + input + input + input + div + div {
  top: -500vh;
  left: -200px;
}
.split #trigger2:checked + input + input + input + input + input + div + div + div {
  top: -100vh;
  right: -300px;
}
.split #trigger2:checked + input + input + input + input + input + div h3 {
  color: #ff9614;
}
.split #trigger2:checked + input + input + input + input + input + div > label:nth-of-type(2) {
  color: #ff9614;
  font-weight: 600 !important;
}
.split #trigger2:checked + input + input + input + input + input + div > label:nth-of-type(2)::after {
  width: calc(100% - 40px);
  background: #ff9614;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner2:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div + div {
  top: -500vh;
  left: calc(-100% - (200px)) !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div + div + div {
  top: -100vh;
  right: calc(-100% - (200px)) !important;
}
.split #triggerInner2:checked + input + input + input + input + input + input + input + input + input + input + input + input + div + div + div + iframe + iframe {
  z-index: 0;
  opacity: 1;
}
.split #trigger3:checked + input + input + input + input + div + div {
  top: -400vh;
  left: -300px;
}
.split #trigger3:checked + input + input + input + input + div + div + div {
  top: -200vh;
  right: -400px;
}
.split #trigger3:checked + input + input + input + input + div h3 {
  color: #03f4d3;
}
.split #trigger3:checked + input + input + input + input + div > label:nth-of-type(3) {
  color: #03f4d3;
  font-weight: 600 !important;
}
.split #trigger3:checked + input + input + input + input + div > label:nth-of-type(3)::after {
  width: calc(100% - 40px);
  background: #03f4d3;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner3:not(:checked) + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div + div {
  top: -400vh;
  left: calc(-100% - (300px)) !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div + div + div {
  top: -200vh;
  right: calc(-100% - (300px)) !important;
}
.split #triggerInner3:checked + input + input + input + input + input + input + input + input + input + input + input + div + div + div + iframe + iframe + iframe {
  z-index: 0;
  opacity: 1;
}
.split #trigger4:checked + input + input + input + div + div {
  top: -300vh;
  left: -400px;
}
.split #trigger4:checked + input + input + input + div + div + div {
  top: -300vh;
  right: -500px;
}
.split #trigger4:checked + input + input + input + div h3 {
  color: #ae2dff;
}
.split #trigger4:checked + input + input + input + div > label:nth-of-type(4) {
  color: #ae2dff;
  font-weight: 600 !important;
}
.split #trigger4:checked + input + input + input + div > label:nth-of-type(4)::after {
  width: calc(100% - 40px);
  background: #ae2dff;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner4:not(:checked) + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div + div {
  top: -300vh;
  left: calc(-100% - (400px)) !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div + div + div {
  top: -300vh;
  right: calc(-100% - (400px)) !important;
}
.split #triggerInner4:checked + input + input + input + input + input + input + input + input + input + input + div + div + div + iframe + iframe + iframe + iframe {
  z-index: 0;
  opacity: 1;
}
.split #trigger5:checked + input + input + div + div {
  top: -200vh;
  left: -500px;
}
.split #trigger5:checked + input + input + div + div + div {
  top: -400vh;
  right: -600px;
}
.split #trigger5:checked + input + input + div h3 {
  color: #efc053;
}
.split #trigger5:checked + input + input + div > label:nth-of-type(5) {
  color: #efc053;
  font-weight: 600 !important;
}
.split #trigger5:checked + input + input + div > label:nth-of-type(5)::after {
  width: calc(100% - 40px);
  background: #efc053;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner5:not(:checked) + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div + div {
  top: -200vh;
  left: calc(-100% - (500px)) !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div + div + div {
  top: -400vh;
  right: calc(-100% - (500px)) !important;
}
.split #triggerInner5:checked + input + input + input + input + input + input + input + input + input + div + div + div + iframe + iframe + iframe + iframe + iframe {
  z-index: 0;
  opacity: 1;
}
.split #trigger6:checked + input + div + div {
  top: -100vh;
  left: -600px;
}
.split #trigger6:checked + input + div + div + div {
  top: -500vh;
  right: -700px;
}
.split #trigger6:checked + input + div h3 {
  color: #ff6c00;
}
.split #trigger6:checked + input + div > label:nth-of-type(6) {
  color: #ff6c00;
  font-weight: 600 !important;
}
.split #trigger6:checked + input + div > label:nth-of-type(6)::after {
  width: calc(100% - 40px);
  background: #ff6c00;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner6:not(:checked) + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div + div {
  top: -100vh;
  left: calc(-100% - (600px)) !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div + div + div {
  top: -500vh;
  right: calc(-100% - (600px)) !important;
}
.split #triggerInner6:checked + input + input + input + input + input + input + input + input + div + div + div + iframe + iframe + iframe + iframe + iframe + iframe {
  z-index: 0;
  opacity: 1;
}
.split #trigger7:checked + div + div {
  top: 0vh;
  left: -700px;
}
.split #trigger7:checked + div + div + div {
  top: -600vh;
  right: -800px;
}
.split #trigger7:checked + div h3 {
  color: #40ffd9;
}
.split #trigger7:checked + div > label:nth-of-type(7) {
  color: #40ffd9;
  font-weight: 600 !important;
}
.split #trigger7:checked + div > label:nth-of-type(7)::after {
  width: calc(100% - 40px);
  background: #40ffd9;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s 1.05s, color 0.2s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 1.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 1.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 1.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 1.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 1.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 1.35s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 1.4s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split #triggerInner7:not(:checked) + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div h3 {
  transition: top 0.3s, color 0.2s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label {
  bottom: -100px;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(1):hover {
  color: #de1663;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(2):hover {
  color: #ff9614;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(5):hover {
  color: #efc053;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div h3 {
  top: 50px;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div + div {
  top: 0vh;
  left: calc(-100% - (700px)) !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div + div + div {
  top: -600vh;
  right: calc(-100% - (700px)) !important;
}
.split #triggerInner7:checked + input + input + input + input + input + input + input + div + div + div + iframe + iframe + iframe + iframe + iframe + iframe + iframe {
  z-index: 0;
  opacity: 1;
}
.split_triggers {
  position: absolute;
  z-index: 1;
  transition: all 1s;
  box-sizing: border-box;
  bottom: 0;
  width: 100%;
  z-index: 5;
  padding: 26px 34px 12px 34px;
  font-weight: 400;
  font-weight: 400;
}
.split_triggers .social {
  float: right;
}
.split_triggers .social a {
  background: none;
  padding: 0;
  margin: 0;
}
.split_triggers .social img {
  width: 20px;
  margin-left: 10px;
  position: relative;
  top: 5px;
}
.split_triggers img {
  width: 26px;
  margin-bottom: 0px;
  float: left;
  top: 3px;
  position: relative;
}
.split_triggers h3 {
  color: #de1663;
  float: left;
  position: relative;
  margin-left: 30px;
  margin-right: 30px;
  font-size: 14px;
  position: relative;
  top: -8px;
  transition: all 0.3s;
  font-weight: 800 !important;
}
.split_triggers h3 img {
  float: right;
  width: 15px;
  position: relative;
  top: 4px;
  left: 10px;
}
.split_triggers label {
  position: relative;
  cursor: pointer;
  bottom: 0;
  display: block;
  padding: 6px 20px;
  float: left;
  color: white;
  font-size: 14px;
  transition: all 0.3s;
  font-weight: 600 !important;
  position: relative;
}
.split_triggers label:hover {
  color: #de1663;
  font-weight: 400;
}
.split_triggers label::after {
  display: block;
  content: "";
  height: 2px;
  width: 0;
  background: #de1663;
  transition: all 0.3s 0.1s;
  position: absolute;
  left: 20px;
  top: 30px;
}
.split_triggers label.logo {
  padding: 0;
  position: static;
  background: transparent !important;
}
.split_triggers label.logo::after {
  display: none;
}
.split_triggers label:nth-of-type(1) {
  transition: bottom 1s 0s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(1):hover {
  color: #de1663;
}
.split_triggers label:nth-of-type(2) {
  transition: bottom 1s 0.05s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(2):hover {
  color: #ff9614;
}
.split_triggers label:nth-of-type(3) {
  transition: bottom 1s 0.1s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(3):hover {
  color: #03f4d3;
}
.split_triggers label:nth-of-type(4) {
  transition: bottom 1s 0.15s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(4):hover {
  color: #ae2dff;
}
.split_triggers label:nth-of-type(5) {
  transition: bottom 1s 0.2s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(5):hover {
  color: #efc053;
}
.split_triggers label:nth-of-type(6) {
  transition: bottom 1s 0.25s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(6):hover {
  color: #ff6c00;
}
.split_triggers label:nth-of-type(7) {
  transition: bottom 1s 0.3s cubic-bezier(0.13, 0.98, 0.505, 0.995), color 0.3s;
}
.split_triggers label:nth-of-type(7):hover {
  color: #40ffd9;
}
.split_left {
  top: -600vh;
  left: -100px;
}
.split_left .slide {
  -webkit-clip-path: polygon(0 0%, 100% 0%, calc(100% - 100px) 100%, 0% 100%);
          clip-path: polygon(0 0%, 100% 0%, calc(100% - 100px) 100%, 0% 100%);
}
.split_left .slide:nth-child(1) {
  left: 600px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide:nth-child(2) {
  left: 500px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide:nth-child(3) {
  left: 400px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide:nth-child(4) {
  left: 300px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide:nth-child(5) {
  left: 200px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide:nth-child(6) {
  left: 100px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide:nth-child(7) {
  left: 0px;
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/me.png), -webkit-linear-gradient(bottom, #180e18 0%, #491a29 100%);
  background-size: cover;
}
.split_left .slide .content {
  left: 50px;
  right: 0;
}
.split_right {
  right: -200px;
  top: 0;
  width: calc(50vw + 100px + 50px) !important;
}
.split_right .slide {
  -webkit-clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 0% 100%);
          clip-path: polygon(100px 0%, 100% 0%, 100% 100%, 0% 100%);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/meright.png"), -webkit-linear-gradient(bottom, #180e18 0%, #461928 100%);
}
.split_right .slide:nth-child(7) {
  right: 700px;
  background-size: cover;
}
.split_right .slide:nth-child(6) {
  right: 600px;
  background-size: cover;
}
.split_right .slide:nth-child(5) {
  right: 500px;
  background-size: cover;
}
.split_right .slide:nth-child(4) {
  right: 400px;
  background-size: cover;
}
.split_right .slide:nth-child(3) {
  right: 300px;
  background-size: cover;
}
.split_right .slide:nth-child(2) {
  right: 200px;
  background-size: cover;
}
.split_right .slide:nth-child(1) {
  right: 100px;
  background-size: cover;
}
.split_right .slide .content {
  right: 50px;
  left: 0;
}
.split_left, .split_right {
  z-index: 4;
  width: calc(50vw + 101px + 50px);
  position: absolute;
  transition: top 1.2s 0.2s cubic-bezier(0.77, 0, 0.175, 1), left 1.2s 0.2s cubic-bezier(0.77, 0, 0.175, 1), right 1.2s 0.2s cubic-bezier(0.77, 0, 0.175, 1);
}
.split_left .slide, .split_right .slide {
  height: 100vh;
  position: relative;
  padding-left: 100px;
  background-attachment: fixed !important;
  background-size: auto 125% !important;
}
.split_left .slide .content, .split_right .slide .content {
  position: absolute;
  margin: auto;
  width: 50%;
  top: 50%;
  transform: translateY(calc(-50% - 0px));
}
.split_left .slide .content img, .split_right .slide .content img {
  width: 180px;
}
.split_left .slide .content label, .split_right .slide .content label {
  display: block;
  background: #de1663;
  font-weight: 700 !important;
  float: left;
  text-align: center;
  padding: 12px 30px 14px 30px;
  margin-top: 10px;
  border: 0;
  color: white;
  font-size: 14px;
  outline: 0;
  cursor: pointer;
  background-size: 170%;
  transition: all 0.5s;
}
blink {
  display: block;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 100%;
  overflow: hidden;
  z-index: 10;
}

blink > * {
  z-index: 2;
}

@-webkit-keyframes grain {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}
@keyframes grain {
  0%, 100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-5%, -10%);
  }
  20% {
    transform: translate(-15%, 5%);
  }
  30% {
    transform: translate(7%, -25%);
  }
  40% {
    transform: translate(-5%, 25%);
  }
  50% {
    transform: translate(-15%, 10%);
  }
  60% {
    transform: translate(15%, 0%);
  }
  70% {
    transform: translate(0%, 15%);
  }
  80% {
    transform: translate(3%, 35%);
  }
  90% {
    transform: translate(-10%, 10%);
  }
}
blink:after {
  -webkit-animation: grain 5s steps(10) infinite;
  animation: grain 5s steps(10) infinite;
  background: url("data:image/png;base64,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");
  content: "";
  display: block;
  height: 300%;
  left: -100%;
  position: absolute;
  top: -100%;
  width: 300%;
  z-index: 1;
}

blink b {
  color: #fff;
  display: block;
  font-family: sans-serif;
  font-size: 75px;
  font-weight: bold;
  letter-spacing: 5px;
  line-height: 850px;
  position: relative;
  text-align: center;
  text-shadow: 0 5px 1px rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
}




------JS------


// This is just used to destroy and append iframes so the sound doesnt bleed into the experience, also saves load time rather than dumping in a ton of iframes

$('.trig').click(function (evt) {
  evt.stopPropagation();

  console.log('test');
  $('iframe').css('opacity', 0);
  setTimeout(function () {
    $('iframe').remove();
  }, 1300);
});

$('.content label.lab').click(function () {
  let ID = $(this).data('iframe');

  setTimeout(function () {
    $('body').append(`<iframe src='https://codepen.io/jcoulterdesign/live/${ID}' />`);
  }, 1500);

  setTimeout(function () {
    $('iframe').css('opacity', 1);
  }, 1600);

});