Autoplay for Carousel

Wishlist Pricing Table
1

Ich habe bei einer Preisliste sehr viele unterschiedliche Angebote, die nicht auf eine Seite passen und möchte, dass man die Möglichkeit hat, dass zwischen diesen automatisch nach x Sekunden ein Wechsel stattfindet, so wie bei einer Slide Diashow.

I have a price list with a lot of different offers that don’t fit on one page and I would like to have the option to switch between them automatically after x seconds, like in a slide show.

3 Likes
2

Hi there, @Michael_Link :waving_hand:

You’d like to implement the autoplay for your “Our Artists” widget, am I right?

If this is the case, could you please specify how you’d like to slide the columns: per item (one by one) or per row (3 columns at once)? I’ll be happy to check with the devs if there is a custom solution :slightly_smiling_face:

1 Like
4

Hi,
Yes, you’re right. :slight_smile:
Both, one by one or row by row would be fine. Important is that there is a visible movement. Without that improvement the user would guess that I only have three instead of 15 artists.
Thenaks a lot.

Best regards
Michael

1 Like
5

Got it, thanks!

We’ll try to consider this feature as an option in the settings. As for now, I’ll discuss with the devs if it’s possible to implement a custom solution.

I’ll update you tomorrow :slightly_smiling_face:

6

Hi there, @Michael_Link :waving_hand:

Unfortunately, there is no solution for the autoplay per row, but it’s possible to implement the autoplay per item:

const DELAY = 2000;

const nextArrowButtonSelector =
	'.elfsight-app-b37249ee-147d-4ca2-92b3-5b4ad31376e4 .es-carousel-arrow-control-right';
const snapCarouselSelector =
	'.elfsight-app-b37249ee-147d-4ca2-92b3-5b4ad31376e4 .es-snap-carousel-wrapper';

let isHovering = false;

function waitForElement(selector, root = document) {
	return new Promise((res) => {
		const observer = new MutationObserver(() => {
			const element = root.querySelector(selector);

			if (element) {
				res(element);
				observer.disconnect();
			}
		});

		observer.observe(root, { childList: true, subtree: true });
	});
}

waitForElement(snapCarouselSelector).then((carousel) => {
	carousel.addEventListener('mouseenter', () => {
		isHovering = true;
	});

	carousel.addEventListener('mouseleave', () => {
		isHovering = false;
	});
});

setInterval(() => {
	if (!isHovering) {
		document.querySelector(nextArrowButtonSelector)?.click();
	}
}, DELAY);

In the 1st line of the code, you should set the interval between slides in milliseconds and add the resulted code to the Custom JS field on the Appearance tab of your widget’s settings :slightly_smiling_face:

1 Like
7

Hey Max,

Great! Thanks a lot!!!

Best regards
Michael

8

GREAT!!! :slight_smile: :slight_smile: :slight_smile:
It works fine!

Thanks a lot!!!

9

Awesome, you’re welcome :wink: