Как переписать код, чтобы работали все карусели, что есть на странице?

Question

[Slash]

Здравствуйте.
Есть код для карусели фотографий, с кнопками переключения, вперед - назад и пагинацией. Карусель прекрасно работает, если она одна на странице... Как сделать, чтобы все карусели работали, что есть на странице, а так же те, что добавляются динамически?

Сам код:

var $slr, $sls, interval, change, $selectors, $btns, currentIndex, nextIndex;
var cycle = index => {
	var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
	nextIndex        = index !== undefined ? index : nextIndex;
	$currentSlide    = $($sls.get(currentIndex));
	$currentSelector = $($selectors.get(currentIndex));
	$nextSlide       = $($sls.get(nextIndex));
	$nextSelector    = $($selectors.get(nextIndex));

	$currentSlide.removeClass('sl-active').css('z-index', '0');
	$nextSlide.addClass('sl-active').css('z-index', '1');
	$currentSelector.removeClass('sl-current');

	$nextSelector.addClass('sl-current');
	currentIndex = index !== undefined ? nextIndex : currentIndex < $sls.length - 1 ? currentIndex + 1 : 0;
	nextIndex    = currentIndex + 1 < $sls.length ? currentIndex + 1 : 0;
};

$(() => {
	currentIndex = 0;
	nextIndex    = 1;
	change       = 8000;
	$slr         = $('.slr');
	$sls         = $('.sl');
	$selectors   = $('.selector');
	$btns        = $('.sl-btn');

	$sls.first().addClass('sl-active');
	$selectors.first().addClass('sl-current');
	interval = window.setInterval(cycle, change);

	$selectors.on('click', e => {
		var target = $selectors.index(e.target);
		if (target !== currentIndex) {
			window.clearInterval(interval);
			cycle(target);
			interval = window.setInterval(cycle, change);
		};
	});

	$btns.on('click', e => {
		window.clearInterval(interval);
		if ($(e.target).hasClass('sl-prev')) {
			let target = currentIndex > 0 ? currentIndex - 1 : $sls.length - 1;
			cycle(target);
		}
		else if ($(e.target).hasClass('sl-next')) {
			cycle();
		};

		interval = window.setInterval(cycle, change);
	});

	$slr.hover(() => {
			window.clearInterval(interval);
		},
		() => {
			interval = window.setInterval(cycle, change);
	});
});

Спасибо.

Answer 1

[Slash]

Исправил так:

var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    = $($sls.get(currentIndex));
		$currentSelector = $($selectors.get(currentIndex));
		$nextSlide       = $($sls.get(nextIndex));
		$nextSelector    = $($selectors.get(nextIndex));

		$currentSlide.removeClass('sl-active').css('z-index', '0');
		$nextSlide.addClass('sl-active').css('z-index', '1');
		$currentSelector.removeClass('sl-current');

		$nextSelector.addClass('sl-current');
		currentIndex = index !== undefined ? nextIndex : currentIndex < $sls.length - 1 ? currentIndex + 1 : 0;
		nextIndex    = currentIndex + 1 < $sls.length ? currentIndex + 1 : 0;
	};

	currentIndex = 0;
	nextIndex    = 1;
	$slr         = $(carouselID);
	$sls         = $(carouselID + ' .sl');
	$selectors   = $(carouselID + ' .selector');
	$btns        = $(carouselID + ' .sl-btn');

	$sls.first().addClass('sl-active');
	$selectors.first().addClass('sl-current');
	interval = window.setInterval(cycle, change);

	$selectors.on('click', e => {
		var target = $selectors.index(e.target);
		if (target !== currentIndex) {
			window.clearInterval(interval);
			cycle(target);
			interval = window.setInterval(cycle, change);
		};
	});

	$btns.on('click', e => {
		window.clearInterval(interval);
		if ($(e.target).hasClass('sl-prev')) {
			var target = currentIndex > 0 ? currentIndex - 1 : $sls.length - 1;
			cycle(target);
		}
		else if ($(e.target).hasClass('sl-next')) {
			cycle();
		};

		interval = window.setInterval(cycle, change);
	});
};

Теперь работает, проверил на странице с четырьмя каруселями.
Пример: https://danfa.net/mobile/app/