Looping Carousel Magnific Popup Gallery

Today we’re going to tackle a problem related to looping carousels like Owl Carousel, Slick Carousel or Swiper Carousel and how we can still use the Magnific Popup Gallery feature if those sliders are set to looping mode.

As you may notice, these carousels when set to loop create clones of each slide.  These clones cause issues with the Magnific popup gallery feature in determining which images to include in the gallery.  Our solution, as outlined below, targets only the original slides and ignores the clones created by the slider.  Here is our function:

jQuery('.loop-gallery').magnificPopup({
	delegate: '.swiper-slide:not(.swiper-slide-duplicate) a.imageitem',
	type: 'image',
	removalDelay: 500, //delay removal by X to allow out-animation
	callbacks: {
		beforeOpen: function() {
			// just a hack that adds mfp-anim class to markup 
			 this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
			 this.st.mainClass = this.st.el.attr('data-effect');
		}
	},
	tLoading: 'Loading image #%curr%...',
	mainClass: 'mfp-img-mobile',
	gallery: {
		enabled: true,
		navigateByImgClick: true,
		preload: [0,1] // Will preload 0 - before current, and 1 after the current image
	},
	image: {
		tError: 'The image #%curr% could not be loaded.'
	}
});

Then, you’ll want to add the imageitem class to each image link in your slider. Example below:

The above example is for the Swiper carousel but you can modify the code as needed to work with Owl Carousel or the Slick Carousel by simply adjusting your target classes on line 2 of the function.

The post Looping Carousel Magnific Popup Gallery appeared first on WP Cover.