Swipe To Slide / Draggable slider using Jquery

Create a file name as index.html. Copy and paste the code in created html file. then preview the file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Draggable & Touch-friendly Slider Example</title>

body {
  height: 100%;
  background: #efefef;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.15em;
  font-size: 18px;
}

.slider {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}

.wrapper {
  overflow: hidden;
  position: relative;
  background: #222;
  z-index: 1;
}

#items {
  width: 40000px;
  position: relative;
  top: 0;
  left: -400px;
}

#items.shifting {
  transition: left .2s ease-out;
}

.slide {
  width: 600px;
  height: 400px;
  cursor: pointer;
  float: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s;
  position: relative;
  background: #FFCF47;
}

.control {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  background: #fff;
  border-radius: 20px;
  margin-top: -20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.prev,
.next {
  background-size: 22px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
}

.prev {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronLeft-512.png);
  left: -20px;
}

.next {
  background-image: url(https://cdn0.iconfinder.com/data/icons/navigation-set-arrows-part-one/32/ChevronRight-512.png);
  right: -20px;
}

.prev:active,
.next:active {
  transform: scale(0.8);
}

</style>

</head>

<body>

<div id="slider" class="slider">
  <div class="wrapper">
    <div id="items" class="items">
      <span class="slide"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t31.0-8/s960x960/11051993_1535113740096524_5268233532364018807_o.jpg?_nc_cat=104&_nc_sid=7aed08&_nc_ohc=83fJJau8f9YAX_XfCfe&_nc_ht=scontent.fblr1-4.fna&_nc_tp=7&oh=97ab1878ef24a44d430dc59c74844c7e&oe=5EE4AB9C"></span>
      <span class="slide"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/12247804_1623717171236180_8921828882326486532_o.jpg?_nc_cat=106&_nc_sid=e007fa&_nc_ohc=OZgQHiCkxQcAX-dA2ZT&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=89d9c1c061d6b11655865dac866ffe4e&oe=5EE6A00F"></span>
      <span class="slide"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/13047753_1680842805523616_6218642279051149860_o.jpg?_nc_cat=106&_nc_sid=e007fa&_nc_ohc=udgcj094XBYAX_BDVp8&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=44622bafab555c9ad09c26f8c4078354&oe=5EE4F136"></span>
      <span class="slide"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t31.0-8/s960x960/12440524_1635749503366280_8633797588043402974_o.jpg?_nc_cat=110&_nc_sid=e007fa&_nc_ohc=IKIwPAslNp0AX8DFmnq&_nc_ht=scontent.fblr1-4.fna&_nc_tp=7&oh=06210e6117adc760f3b27e8b2918a51c&oe=5EE4C624"></span>
      <span class="slide"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/83772842_2501960390078516_9184324006675742720_o.jpg?_nc_cat=103&_nc_sid=e007fa&_nc_ohc=dnQJd9d79LwAX9nmI3W&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=7f36d12bd53f56df709b12b69847dfe0&oe=5EE69F53"></span>
    </div>
  </div>
  <a id="prev" class="control prev"></a>
  <a id="next" class="control next"></a>
</div>
<script>
	var slider = document.getElementById('slider'),
    sliderItems = document.getElementById('items'),
    prev = document.getElementById('prev'),
    next = document.getElementById('next');

slide(slider, sliderItems, prev, next);

document.onmouseup = null;
    document.onmousemove = null;
  }
  
  function shiftSlide(dir, action) {
    items.classList.add('shifting');
    
    if (allowShift) {
      if (!action) { posInitial = items.offsetLeft; }

if (dir == 1) {
        items.style.left = (posInitial - slideSize) + "px";
        index++;      
      } else if (dir == -1) {
        items.style.left = (posInitial + slideSize) + "px";
        index--;      
      }
    };
    
    allowShift = false;
  }
    
  function checkIndex (){
    items.classList.remove('shifting');

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

if (index == slidesLength) {
      items.style.left = -(1 * slideSize) + "px";
      index = 0;
    }
    
    allowShift = true;
  }
}
</script>
</body>

</html>

Swipe To Slide / Draggable slider