payload =  [{
	"url": "https://s3.amazonaws.com/appforest_uf/f1573502006658x593350952181959600/IMG_7552.JPG","filter": "nashville","caption": "Keriyaki Salmon Cakes"
},{
	"url": "https://source.unsplash.com/featured/?dinner","filter": "aden","caption": "Salmon Crepe"
},{
	"url": "https://source.unsplash.com/featured/?dinner/1","filter": "mayfair","caption": "Quinoa chorizo breakfast tacos "
},{
	"url": "https://source.unsplash.com/featured/?dinner/2","filter": "lofi",{
	"url": "https://source.unsplash.com/featured/?dinner/3","filter": "kelvin",{
	"url": "https://source.unsplash.com/featured/?lunch/4","caption": "Keriyaki Salmon Cakes"
}]
	
const init = function(){
	const slider = document.querySelector('.slider');
	document.querySelector('.pagination').innerHTML = `<span>1 / ${payload.length}<span>`;
	for (let i = 0; i < payload.length; i++){
		slider.innerHTML += "<section><figure class='" + payload[i].filter + "'><img src='" + payload[i].url + "' /> <figcaption>" + payload[i].caption + "</figcaption></figure></section>";
	}
}
init();

// Add pagination
slider.addEventListener('scroll',_.throttle(function() {
  index = Math.round(slider.scrollLeft / slider.offsetWidth )+1
  document.querySelector('.progress').style.width = `${(index-1) * (slider.offsetWidth / (payload.length-1))}px`
	document.querySelector('.pagination').innerHTML = `<span>${index} / ${payload.length}<span>`;
},100))



//Make the DIV element draggagle:
dragelement(document.querySelector('.slider'));

function dragelement(elmnt) {
  var pos1 = 0,pos3 = 0;
    elmnt.onmousedown = dragMouseDown;
  }

  function dragMouseDown(e) {
    // console.log("herte")
    e = e || window.event;
    // e.preventDefault();
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    document.onmouseup = closeDragelement
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag
  }

  function elementDrag(e) {
    e = e || window.event;
    // e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos3 = e.clientX;
    // set the element's new position:
    elmnt.scrollLeft = (elmnt.offsetLeft - pos1);
  }

  function closeDragelement() {
    /* stop moving when mouse button is released:*/
    document.onmouseup = null;
    document.onmousemove = null;
}

img {
  display: inline-block;
  height: 100vh;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  overflow-y: hidden;
}

.slider {
  -webkit-overflow-scrolling: touch;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  display: flex;
  overflow-x: auto;
}

section {
  min-width: 100vw;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  text-align: center;
  position: relative;
}

figcaption {
  background-color: rgba(0,23,0.82);
  color: #fff;
  display: block;
  float: left;
  position: absolute;
  bottom: 4px;
  left: 2px;
  right: 2px;
  font-family: Roboto;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 33px;
  letter-spacing: 0.01em;
}

.pagination {
  display: inline-block;
  position: fixed;
  background: rgba(47,47,0.85);
  color: #fff;
  text-align: center;
  border-radius: 13px;
  z-index: 4;
  width: 70px;
  top: 20px;
  right: 20px;
}

.progress {
  position: fixed;
  background-color: rgba(0,0.82);
  border-style: solid;
  border-right-width: thick;
  border-right-color: #15CFB2;
  z-index: 4;
  top: 0px;
  left: 0px;
  height: 2px;
  transition: width .15s ease-in-out;
}

span {
  display: inline-block;
  line-height: 28px;
  vertical-align: middle;
}

.nofilter {
  position: relative;
  -webkit-filter: contrast(1) brightness(1) saturate(1);
  filter: contrast(1) brightness(1) saturate(1);
}

.nofilter img {
  width: 100%;
  z-index: 1;
}

.nofilter:before {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

.nofilter:after {
  content: '';
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  position: absolute;
  pointer-events: none;
  z-index: 3;
}

<link rel="stylesheet" href="https://cssgram-cssgram.netdna-ssl.com/cssgram.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<div class="slider" id="slider">
  <div class='progress'></div>
	<div class='pagination'></div>
</div>