Каталог

<div id="catalogViewer" style="max-width:1000px;margin:0 auto;position:relative;font-family:sans-serif;">

  <div id="catalogBook" style="display:flex;gap:10px;">
    
    <div id="pageLeftWrap" style="flex:1;display:flex;">
      <img id="pageLeft" style="width:100%;height:auto;" />
    </div>

    <div id="pageRightWrap" style="flex:1;display:flex;">
      <img id="pageRight" style="width:100%;height:auto;" />
    </div>

  </div>

  <div class="catalog-arrow left" style="position:absolute;left:-40px;top:50%;transform:translateY(-50%);font-size:40px;cursor:pointer;">‹</div>
  <div class="catalog-arrow right" style="position:absolute;right:-40px;top:50%;transform:translateY(-50%);font-size:40px;cursor:pointer;">›</div>

</div>

<script>
(function () {
  const totalPages = 25;
  let currentPage = 1;

  const book = document.getElementById('catalogBook');
  const leftWrap = document.getElementById('pageLeftWrap');
  const rightWrap = document.getElementById('pageRightWrap');
  const leftImg = document.getElementById('pageLeft');
  const rightImg = document.getElementById('pageRight');
  const leftArrow = document.querySelector('.catalog-arrow.left');
  const rightArrow = document.querySelector('.catalog-arrow.right');

  function getImage(page) {
    return '/catalog/assets/image/KATALOG-number-' + page + '.png';
  }

  function isMobile() {
    return window.matchMedia('(max-width: 768px)').matches;
  }

  function applyLayout() {
    if (isMobile()) {
      book.style.display = 'block';
      rightWrap.style.display = 'none';
    } else {
      book.style.display = 'flex';
      rightWrap.style.display = 'flex';
    }
  }

  function updateArrows() {
    if (isMobile()) {
      leftArrow.style.display = currentPage <= 1 ? 'none' : 'block';
      rightArrow.style.display = currentPage >= totalPages ? 'none' : 'block';
    } else {
      leftArrow.style.display = currentPage <= 1 ? 'none' : 'block';
      rightArrow.style.display = currentPage + 1 >= totalPages ? 'none' : 'block';
    }
  }

  function render() {
    applyLayout();

    leftImg.src = getImage(currentPage);

    if (!isMobile() && currentPage + 1 <= totalPages) {
      rightImg.src = getImage(currentPage + 1);
      rightImg.style.display = 'block';
    } else {
      rightImg.style.display = 'none';
    }

    updateArrows();
  }

  function next() {
    if (isMobile()) {
      if (currentPage < totalPages) currentPage++;
    } else {
      if (currentPage + 2 <= totalPages) currentPage += 2;
    }
    render();
  }

  function prev() {
    if (isMobile()) {
      if (currentPage > 1) currentPage--;
    } else {
      if (currentPage - 2 >= 1) currentPage -= 2;
    }
    render();
  }

  leftArrow.addEventListener('click', prev);
  rightArrow.addEventListener('click', next);

  // keyboard navigation
  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowRight') next();
    if (e.key === 'ArrowLeft') prev();
  });

  // swipe support
  let startX = 0;
  document.addEventListener('touchstart', e => {
    startX = e.changedTouches[0].screenX;
  }, { passive: true });

  document.addEventListener('touchend', e => {
    const diff = startX - e.changedTouches[0].screenX;
    if (Math.abs(diff) > 50) {
      if (diff > 0) next();
      else prev();
    }
  }, { passive: true });

  // initial render immediately
  render();

})();
</script>