JSFiddle - React, Tailwind, and code Playground

HTML

<script>
	function swipe(event){
	var midpoint = Math.floor(screen.width/2);
  var touch = event.targetTouches[0];
  var px = touch.pageX;
  var firstItem = document.getElementById('firstItem'); 
  if(px > midpoint){
  	firstItem.style.marginLeft = '-100%';
    firstItem.style.transition = '1s ';
  }else{
  	firstItem.style.marginLeft = '0';
    firstItem.style.transition = '1s ';
    
  }
}
</script>
<div class="images-gallary" ontouchmove="swipe(event)">
  <div class="image-wrapper" id="firstItem">
    <img class="image" src="http://placehold.it/73/200">
  </div>
  <div class="image-wrapper" id="secondItem">
    <img class="image" src="http://placehold.it/73/300">
  </div>
  <div class="image-wrapper">
    <img class="image" src="http://placehold.it/73/400">
  </div>
</div>

CSS

.images-gallary{
  background-color: #000;
  overflow: hidden;
  height: 73px;
  white-space: nowrap;
}

.image-wrapper{
  width: 100%;
  display: inline-block;
  text-align: center;
}

#secondItem{
  background: #fff;
}