<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>

@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 {
  &, *  {
    font-family: Inconsolata, Verdana, Geneva, Tahoma, sans-serif;  
    color: white;     
  }
  background-color: black;
}

.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;
  .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;
  .slide-image {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    left: 10%;
    top: 10%;      
    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;
  &:after {
    content: '';
    background-color: white;
    display: inline-block;
    width: 0;
    height: 4px;
    transition: all 200ms linear;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  &.nav-prev {
    &:after {
      left: unset;
      right: 0;
    }
  }  
  &:hover {
    &:after {
      width: 100%;
    }
  }
  &.nav-next  {
    // margin-left:  20px;
  }
}

.backgrounds {
  position: absolute;
  width: 100%;
  height: 100%;
  .bg-pieces {
    position: absolute;
    width: 100%;
    height: 100%;
    .bgpiece {
      background-repeat: no-repeat;
      position: relative;
      filter: brightness()
    }
    .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);
    }  
    .two {
      width: 120%;
      height: 30px;
      left: 20px;
      z-index: 99;
      background-position: 0px -120px;
      mix-blend-mode: overlay;
      background-size: 100% auto;
    }    
    .three {
      width: 115%;
      height: 60px;
      background-size: 100% auto;
      background-position: 0 -200px;
      top: 60px;
      left: -50px;
      filter: brightness(1.3) saturate(.9) hue-rotate(10deg);
    }  
    .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;
  > div {
    border: 1px solid white;
    padding: 5px 10px;
    margin: 15px;
    cursor: pointer;
    &.current {
      background-color: white;
      color: black;
    }
  }
}

$(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'))

});