display-medium-posts icon indicating copy to clipboard operation
display-medium-posts copied to clipboard

Shortcode generates two carousels

Open Schobbish opened this issue 3 years ago • 1 comments

Two carousels are showing up when I use the shortcode. The second one has the same number of posts that I want, but displayed one at a time. This doesn't happen when list=true. I'm afraid it has something to do with my theme or setup since it works fine on another website of mine.

My shortcode (it's the same as the example): [display_medium_posts handle="@acekyd" default_image="http://www.acekyd.com/wp-content/uploads/2014/11/IMG_20150731_220116.png" display=4 offset=2 total=10 list=false title_tag="h2"]

Test page: http://ide.schobbish.com/medium-test/

Schobbish avatar Jun 08 '22 16:06 Schobbish

For now, modifying the initializeOwl function to look like this will at least delete the content, but the dots will come back.

function initializeOwl(count) {
	var owl = jQuery(".display-medium-owl-carousel");
	owl.owlCarousel({
		items: count,
		lazyLoad: true,
	});
	owl.on("initialized.owl.carousel", function(event) {
		jQuery(".owl-stage-outer,.owl-dots").remove();
	});
}

EDIT: this works better, but maybe it's a little inelegant lol

function initializeOwl(count) {
	jQuery(".display-medium-owl-carousel").owlCarousel({
		items: count,
		lazyLoad: true,
	});
	const dotRemover = new MutationObserver(function(mutationList, observer) {
		jQuery(".owl-stage-outer, .owl-dots").remove();
	});
	dotRemover.observe(document.getElementById("display-medium-owl-demo"), { childList: true });
}

ANOTHER EDIT: I've just realized that I can just hide the offending elements using the additional CSS section in the Customizer like so:

.owl-stage-outer, .owl-dots {
	display: none
}

Schobbish avatar Jun 08 '22 16:06 Schobbish