CodePen Embed - Simple Swiping Slider

<!-- For the Codepen Challenge of January 2019 -->
<div class="o-wrapper">
  <header class="c-header">
    <h2>Recipes</h2>
    <div class="c-drag">
      You're not swiping!
    </div>
  </header>
  
  <div class="c-slider">
    <div class="c-slide c-slide--breakfast">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image"           src="https://images.unsplash.com/photo-1504708706948-13d6cbba4062?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" alt="">
        </figure>
        <h3>Homemade Granola</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>
    
    <div class="c-slide c-slide--salad">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image"           src="https://images.unsplash.com/photo-1538301258798-f3fdb8bbc3c5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" alt="">
        </figure>
        <h3>Ceasar Salad</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>
    
    <div class="c-slide c-slide--dinner">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image"           src="https://images.unsplash.com/photo-1523986490752-c28064f26be3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=4350&q=80" alt="">
        </figure>
        <h3>Pulled pork</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>

    <div class="c-slide c-slide--salad">
      <div class="c-slide__content">
        <figure class="c-slide__image-wrapper">
          <img 
            class="c-slide__image" src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80" alt="">
        </figure>
        <h3>Summer salad</h3>
      </div>
      
      <div class="c-slide__actions">
        <div class="c-slide__heart">
          <svg width="23" height="20" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.991 18.802a.668.668 0 0 1-.491.2.668.668 0 0 1-.491-.2l-6.964-6.719a3.684 3.684 0 0 1-.307-.29c-.13-.134-.337-.378-.62-.731a9.876 9.876 0 0 1-.759-1.088 6.76 6.76 0 0 1-.597-1.35 4.889 4.889 0 0 1-.262-1.54c0-1.638.472-2.917 1.417-3.84.945-.923 2.251-1.384 3.918-1.384.461 0 .932.08 1.412.24.48.16.926.376 1.339.647.413.272.768.527 1.066.765.297.238.58.49.848.759.268-.268.55-.521.848-.76a14.28 14.28 0 0 1 1.066-.764c.413-.271.86-.487 1.34-.647.48-.16.95-.24 1.411-.24 1.667 0 2.973.461 3.918 1.384.945.923 1.417 2.202 1.417 3.84 0 1.644-.852 3.318-2.556 5.022l-6.953 6.696z" stroke="#000" stroke-width="2" fill="none" fill-rule="evenodd"/>
          </svg>
        </div>
        <a href="/" class="c-slide__link">
          <svg width="11" height="18" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.328 9.036a.543.543 0 0 1 .172.395c0 .15-.057.281-.172.396L2.324  17.83a.543.543 0 0 1-.395.172.543.543 0 0 1-.396-.172l-.858-.859a.543.543 0 0 1-.172-.395c0-.149.057-.28.172-.395l6.75-6.75L.675 2.68a.543.543 0 0 1-.172-.395c0-.15.057-.28.172-.395l.858-.86A.543.543 0 0 1 1.93.86c.148 0 .28.057.395.172l8.004 8.004z" fill="#000" fill-rule="evenodd"/>
          </svg>
        </a>
      </div>
    </div>
  </div>
</div>

body {
  font-family: "Muli", sans-serif;
}

h2 {
  margin: 15px;
  padding: 0;
}

.o-wrapper {
  max-width: 500px;
  margin: auto;
  overflow: hidden;
  padding-bottom: 50px;
}

.c-slider {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  width: 770px;
}

.c-slide {
  font-weight: normal;
  margin-right: 20px;
  background: #FFFFFF;
  border-radius: 3px;
  border-left: 10px solid #FCEDB7;
  padding: 20px; 
  box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  flex: 1;
  overflow: hidden;
}

.c-slide--salad {
  border-color: #A3CCB6;
}

.c-slide--dinner {
  border-color: #EC7871;
}

.c-slide__content {
  width: 100%;
}

.c-slide__actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.c-slide__image-wrapper {
  margin: 0;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  height: 0;
  padding-top: 66%;
  position: relative;
}

.c-slide__image {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  min-height: 100%;
  margin: auto;
  padding: 0;
  transform: translate3d(-50%, -50%, 0);
}

.c-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.c-drag {
  opacity: 0.2;
}

const slider = document.getElementsByClassName('c-slider')[0];
const timeline = new TimelineLite();
const info = document.getElementsByClassName('c-drag')[0];

let canMove = false;
let touchDown = 0;
let prevX = 0;
let slides = document.getElementsByClassName('c-slide');
const slideWidth = slides[0].offsetWidth + 20;


const init = () => {
  slider.addEventListener('mousedown', handleMouse);
  slider.addEventListener('mouseup', handleMouse);
  slider.addEventListener('mousemove', handleMove);
  
  slider.addEventListener('touchstart', handleTouch);
  slider.addEventListener('touchmove', handleTouchMove);
};

/* Mouse handlers */
const handleMouse = e => {
  if (e.type === 'mouseup') {
    canMove = false;
  } else {
    canMove = true;
  }
};

const handleMove = e => {
  if (e.pageX < prevX && canMove) {
    /* to left */
    info.innerHTML = 'Swiping left!';
    handleSwipeLeft();
    canMove = false;
  } else if (e.pageX > prevX && canMove) {
    /* to right */
    info.innerHTML = 'Swiping right!';
    handleSwipeRight();
    canMove = false;
  }

  prevX = e.pageX;
};

/* Touch handlers */
const handleTouch = e => {
  touchDown = e.touches[0].clientX
}

const handleTouchMove = e => {
  if (!touchDown) {
    return
  }

  const touchUp = e.touches[0].clientX
  const touchDiff = touchDown - touchUp

  if (touchDiff > 0) {
    info.innerHTML = 'Swiping left!';
    handleSwipeLeft();
  } else {
    info.innerHTML = 'Swiping right!';
    handleSwipeRight();
  }

   touchDown = null
 };

/* Swipe handlers */
const handleSwipeLeft = () => {  
  timeline.fromTo(slider, 1, 
    {
      x: '0px'
    },
    {
      x: `-${slideWidth}px`,
      ease: Power4.easeOut
    }
  );
  
  timeline.to(slider, 0.001, 
    {
      x: '0px',
      onComplete: () => {
        slider.appendChild(slides[0]);
        slides = document.getElementsByClassName('c-slide');
      }
    }
  );
};

const handleSwipeRight = () => {  
  timeline.to(slider, 0.001, 
    {
      x: `-${slideWidth}px`,
      onComplete: () => {
        const first = slides[0];
        const last = slides[slides.length - 1];
        slider.insertBefore(last, first);
        slides = document.getElementsByClassName('c-slide');
      }
    }
  );
  
  timeline.to(slider, 1, 
    {
      x: `0px`,
      ease: Power4.easeOut
    }
  );
};

init();

View Compiled

This Pen is owned by Katia on CodePen.

See more by @katiasmet on CodePen

External CSS

https://fonts.googleapis.com/css?family=Muli:400,700

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js