Page History

<?php if ($swiper) : ?>
		(function($) {
			$(document).ready(function() {
				var swiperInstances = swiperInstances || {};
					swiperInstances['<?php echo $block['id']; ?>'] = new Swiper('#<?php echo $id ?> .swiper-container', {
          			//XS screen size set as default
					slidesPerView: <?php echo $columns_xs ?>,
          			slidesPerGroup: <?php echo $columns_xs ?>,
					loop: true,
					centeredSlides: false,
          
          lazy: { //adds lazy loading for hidden slides.
            loadPrevNext: true, // Preload previous/next slides
          },

		breakpoints: {
			//set breakpoints the same as flex columns
              //setting slides Per Group means each click of the swiper moves the whole row, instead of one image at a time.
              576: {
				slidesPerView: <?php echo $columns_sm ?>,
                slidesPerGroup: <?php echo $columns_sm ?>,
				spaceBetween: 0
				},
              768: {
				slidesPerView: <?php echo $columns_md ?>,
                slidesPerGroup: <?php echo $columns_md ?>,
				spaceBetween: 0
				},
              992: {
				slidesPerView: <?php echo $columns_lg ?>,
                slidesPerGroup: <?php echo $columns_lg ?>,
				spaceBetween: 0
				},
              1200: {
				slidesPerView: <?php echo $columns_xl ?>,
                slidesPerGroup: <?php echo $columns_xl ?>,
				spaceBetween: 0
				}
			},
						pagination: {
								el: '#<?php echo $id ?> .swiper-pagination',
								type: 'custom',
								renderCustom: function (swiper, current, total) {
									return current + '/' + (total);
								}
							},
						navigation: {
							nextEl: '#<?php echo $id ?> .swiper-button-next',
							prevEl: '#<?php echo $id ?> .swiper-button-prev',
						},
					});
				});
			})(jQuery);
	<?php endif; ?>