sample_swipe

Swipe Images

by sridhar reddy

HTML

<div class="images-gallary">
  <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" id="thirdItem">
    <img class="image" src="http://placehold.it/73/400" />
  </div>
</div>
<button onclick="swipe(event, 'left')">left</button>
<button onclick="swipe(event, 'right')">right</button>
<script>
  var ImageIndex = 0;

  function swipe(event, direction) {
    var midpoint = Math.floor(screen.width / 2);
    var px = event.pageX;
    var items = document.getElementsByClassName('image-wrapper');
    var itemActive = items[ImageIndex];
    if (direction === 'left') {
      itemActive.style.marginLeft = '-100%';
      itemActive.style.transition = '1s ';
      ImageIndex = ImageIndex < items.length - 1 ? ImageIndex + 1 : ImageIndex;
    } else {
      itemActive.style.marginLeft = '0';
      itemActive.style.transition = '1s ';
      ImageIndex = ImageIndex >= 1 ? ImageIndex - 1 : 0;
    }
  }

</script>

CSS

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

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

#firstItem {
  background: #a8a8a8;
}

#secondItem {
  background: #c8c8c8;
}

#thirdItem {
  background: #d8d8d8;
}