<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/RaduBratan/CodePen-TweenMax-slider-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/RaduBratan/CodePen-TweenMax-slider-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/RaduBratan/CodePen-TweenMax-slider-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/RaduBratan/CodePen-TweenMax-slider-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/RaduBratan/CodePen-TweenMax-slider-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/RaduBratan/CodePen-TweenMax-slider-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>
//if the render preview is broken (i.e. animations don't work properly or nothing moves when scrolling), reload the page

@import url("https://fonts.googleapis.com/css?family=Poppins");

$slider-width: 100vw;
$slider-height: 100vh;

* {
  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;

  .slides-styler-wrapper {
    overflow: hidden;
    position: relative;
    width: $slider-width;
    height: $slider-height;
    z-index: 1;
    vertical-align: middle;
    z-index: 95;

    .slides-container {
      overflow: hidden;
      display: flex;
      position: relative;
      top: 0;
      left: -$slider-width;
      width: 1000vw;
      z-index: 97;

      &.shifting {
        transition: left 0.2s ease-in-out;
      }

      .slide {
        width: $slider-width;
        height: $slider-height;
        cursor: pointer;
        transition: all 0.6s;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 98;

        .image-container {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: absolute;
          transform: translate(0%, 0%);
          overflow: hidden;

          .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));

            &.image1 {
              width: 15vmax;
              height: 15vmax;
              transform: translate(80%, 40%);
              filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
            }

            &.image2 {
              width: 10vmax;
              height: 10vmax;
              transform: translate(-150%, -50%) rotate(-45deg);
              filter: drop-shadow(2px 2px 16px rgba(0, 0, 0, 0.1));
            }
          }
        }

        .layer1 {
          z-index: 101;
        }

        .layer2 {
          z-index: 100;
        }

        .layer3 {
          z-index: 99;
        }

        .text {
          font-size: 10vmax;
          position: absolute;
          transform: translate(0%, 0%);
        }
        
        .color1 {
          color: #000;
        }
        
        .color2 {
          color: #fff;
        }
      }
    }
  }

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

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

  &.animation-reveal {
    pointer-events: none;

    .text {
      animation: reveal-text 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .image {
      animation: reveal-image 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .image1 {
      animation: reveal-image1 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .image2 {
      animation: reveal-image2 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .previous-arrow {
      animation: reveal-arrow 1s cubic-bezier(0.77, 0, 0.175, 1);
    }

    .next-arrow {
      animation: reveal-arrow 1s cubic-bezier(0.77, 0, 0.175, 1);
    }
  }

  &.animation-previous {
    pointer-events: none;

    .text {
      animation: previous-text 0.6s 0.085s;
    }

    .image {
      animation: previous-image 0.6s 0.085s;
    }

    .image1 {
      animation: previous-image1 0.6s 0.085s;
    }

    .image2 {
      animation: previous-image2 0.6s 0.085s;
    }

    .previous-arrow {
      animation: previous-left-arrow 0.6s;
    }

    .next-arrow {
      animation: previous-right-arrow 0.6s;
    }
  }

  &.animation-next {
    pointer-events: none;

    .text {
      animation: next-text 0.6s 0.085s;
    }

    .image {
      animation: next-image 0.6s 0.085s;
    }

    .image1 {
      animation: next-image1 0.6s 0.085s;
    }

    .image2 {
      animation: next-image2 0.6s 0.085s;
    }

    .previous-arrow {
      animation: next-left-arrow 0.6s;
    }

    .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);
  }
}
View Compiled
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();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/utils/Draggable.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js