gallery

by Artem

HTML

<button class="gallery__control gallery__control_prev" data-direction="prev">Prev</button>
<div class="gallery">
  <div class="gallery__inner">
    <div class="gallery__item">1</div>
    <div class="gallery__item">2</div>
    <div class="gallery__item">3</div>
    <div class="gallery__item">4</div>
  </div>
</div>
<button class="gallery__control gallery__control_next" data-direction="next">Next</button>

CSS

* {
  box-sizing: border-box;
}

.gallery {
  height: 400px;
  overflow: hidden;
  position: relative;
}

.gallery__inner {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  top: 0;
  transition: all 1s linear;
}

.gallery__item {
  height: 200px;
  border: 2px solid #fff;
  background-color: #c9c9c9;
}

JavaScript

'use strict';

const galleryInner = document.getElementsByClassName('gallery__inner')[0];
let top = galleryInner.style.top || 0;
let index = 1;
let length = galleryInner.childElementCount;
const buttons = document.getElementsByClassName('gallery__control');

let i, len
for (i = 0, len = buttons.length; i < len; i++) {
  buttons[i].addEventListener('click', function(e) {
    slide(e.target.dataset.direction);
  });
}

function slide(direction) {
  if (direction === 'prev') {
    if (index === 1) return;
    top += 200;
    index--;
    galleryInner.style.top = top + 'px';
    return;
  }
  if (index === length - 1) loadMore(index);
  top -= 200;
  index++;
  galleryInner.style.top = top + 'px';
}

function loadMore(index) {
	const element = document.createElement('div');
  element.classList.add('gallery__item');
  element.innerText = index + 2;
  
  galleryInner.append(element);
  length++;
}