preview images with slide animation

index.html

<div>
  <div id="preview" class="preview">
    <nav class="nav">
      <button class="close">
        返回
      </button>
    </nav>
    <div class="container">
      <button class="prev">&lt;</button>
      <button class="next">&gt;</button>
    </div>
  </div>

  <div class="list">
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/1">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/2">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/3">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/4">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/5">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/6">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/7">
    </div>
    <div class="item">
      <img src="https://api.adorable.io/avatars/285/8">
    </div>
  </div>
</div>

preview-images-with-slide-animation.markdown

preview images with slide animation

A Pen by Cheng Jianhua on CodePen.

License.

script.babel

const $preview = $('#preview');
const $container = $preview.find('.container');
const $prev = $container.find('.prev');
const $next = $container.find('.next');
const $itemsList = $('.list .item');

$('img').attr('draggable', false);

const defaultParams = {
  isPressing: false,
  isDragging: false,
  originalX: 0,
  offsetX: 0
};


function handleSwitch(el, params, event) {
  const {
    offsetX
  } = params;

  if (Math.abs(offsetX) > 100) {
    if (offsetX < 0) {
      $next.click();
    } else if (offsetX > 0) {
      $prev.click();
    }
  }

  Object.assign(params, defaultParams);
  $(el).css('transform', 'none');

}

function bindDragEvents($el) {
  const params = Object.assign({}, defaultParams)

  return $el
    .on('mousedown touchstart', function(event) {
      params.isPressing = true;
      params.originalX = event.pageX;
    })
    .on('mousemove touchmove', function(event) {

      if (params.isPressing) {
        const offsetX = event.pageX - params.originalX;

        params.offsetX = offsetX;

        console.log('move', offsetX)

        $(this).css('transform', `translateX(${offsetX}px)`);
      }
    })
    .on('mouseup touchend', function(event) {
      handleSwitch(this, params, event);
    })
    .on('mouseout touchend', function(event) {
      if (params.isPressing) {
        handleSwitch(this, params, event);

      }
    });
}

function getItemWithIndex(index) {
  const $el = $($itemsList.get(index))
    .clone()
    .data({
      index
    });

  return bindDragEvents($el);
}

$('.list .item').click(function() {
  $preview.addClass('active');

  const index = $itemsList.index($(this));

  const $itemPreview = getItemWithIndex(index);

  $container.append($itemPreview);
});

$('.close').click(() => {
  $preview.removeClass('active');
  $container.find('.item').remove();
});

$prev.click(function() {
  const $currentItem = $container.find('.item');
  const prevIndex = $currentItem.data('index');

  if (prevIndex > 0) {
    const $prevItem = getItemWithIndex(prevIndex - 1);

    $currentItem.remove();

    $container.append($prevItem);
  }
});

$next.click(function() {
  const $currentItem = $container.find('.item');
  const nextIndex = $currentItem.data('index');

  if (nextIndex < $itemsList.length - 1) {
    const $nextItem = getItemWithIndex(nextIndex + 1);

    $currentItem.remove();

    $container.append($nextItem);
  }
});
//$('.list .item').slick();

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

style.scss

.preview {
  display: none;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3;
  &.active {
    display: block;
  }
  .nav {
    height: 50px;
    padding: 1em;
    .close {
      display: inline-block;
      border-radius: 4px;
      border: none;
      padding: .5em 1em;
      background-color: white;
    }
  }
  .container {
    padding: 3em;
    position: relative;
    overflow: hidden;
    &,
    & * {
      box-sizing: border-box;
    }
    .prev,
    .next {
      width: 32px;
      height: 32px;
      font-size: 16px;
      line-height: 16px;
      background-color: white;
      border: none;
      border-radius: 100%;
      color: rgba(0, 0, 0, .5);
      display: block;
      font-weight: bolder;
      position: absolute;
      top: 50%;
      cursor: pointer;
      transform: translateY(-50%);
    }
    .prev {
      left: 1em;
    }
    .next {
      right: 1em;
    }
    .item {
      width: 100%;
      max-width: 500px;
      /* position: relative; */
      /* transition: all .3s ease; */
    }
  }
}

.list {
  width: 100%;
  position: relative;
  &,
  & * {
    box-sizing: border-box;
  }
}

.item {
  display: inline-block;
  width: 25%;
  margin: 0;
  padding: 10px;
  float: left;
  img {
    width: 100%;
  }
}