<div class="viewer">
  <div class="swiper-container" id="popupGallery">
    <div class="swiper-wrapper">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_1.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_2.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_3.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_4.jpg">
      <img class="swiper-slide" src="https://static.reades.co.uk/1001-487d/0/image_5.jpg">
    </div>
    <div class="popupGalleryPrev" style="position: absolute; top: 0; bottom: 0; left: 0; width: 50%; cursor: pointer; z-index: 2;"></div>
    <div class="popupGalleryNext" style="position: absolute; top: 0; bottom: 0; right: 0; width: 50%; cursor: pointer; z-index: 2;"></div>
  </div>
</div>

.viewer {
  background-color: #666;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

var popupGallery = new Swiper('#popupGallery', {
  loop: true,
  nextButton: '.popupGalleryNext',
  prevButton: '.popupGalleryPrev',
  spaceBetween: 2
});