Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Shortcode generates two carousels #40

Open
Schobbish opened this issue Jun 8, 2022 · 1 comment
Open

Shortcode generates two carousels #40

Schobbish opened this issue Jun 8, 2022 · 1 comment

Comments

@Schobbish
Copy link

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
Copy link
Author

Schobbish commented Jun 8, 2022

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
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant