This demonstration uses the SWIPER slideshow and has fixed size responsive slides.

As you reduce the browser window the number of slides shown will reduce to two and then one.

The slideshow will pause on hover and, if you click/tap the magnifying glass on each slide, a popover will open showing a full screen size image.

The slideshow will also stay paused while the full screen image is showing.

The pagination has also been moved below the slideshow and the size controlled by the :root css variables. The color has been styled by adding bulletClass: 'swiper-pagination-bullet' to the 'Initialize Swiper' setting and then adding the CSS style .swiper-pagination-bullet-active {background:#080 !important;}.