Как добавить кнопки «Следующая / Предыдущая» в простую галерею изображений в формате bg для открытия.

Question

Я хочу добавить предыдущую / следующую кнопку в мою существующую галерею внизу. Вот пример этой галереи: https://junkheap.net/examples/revealjs-gallery/#/2, но я хочу использовать галерею в автономном режиме в качестве презентации (но это не должно иметь значения для кода)

В заключение я просто хочу добавить предыдущие и следующие кнопки в галерею, которую я использую, и мне не нужен интервал с автоматическим продвижением, который у меня есть сейчас, но мне нужно использовать этот конкретный код галереи, потому что он может иметь дело со структурой моего сайта show.js и с тем, чтобы вывести себя из потока, чтобы создать галерею фоновых изображений на своем месте, прежде чем вернуть его после запуска команды .slidechanged.

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

это используемая среда: https://github.com/hakimel/reveal.js, и это плагин, который может быть интегрирован и где мне нужны кнопки для https://github.com/marcins/revealjs-simple-gallery

(function(Gallery) {
	var galleryTimer, galleryMode;

	Gallery.step = function (items, iterations) {
		var length = items.length,
			ptr = 0,
			loops = 0;

		return function () {
			if (iterations > 0 && loops === iterations) {
				return;
			}
			items[ptr].className = "inactive";
			if (ptr === length - 1) {
				loops++;
				if (iterations === 0 || loops < iterations) {
					ptr = 0;
				}
			} else {
				ptr++;
			}
			items[ptr].className = "active";
		};
	};

	Gallery.start = function (galleryNode, contextNode) {
		contextNode = contextNode || document.body.firstChild;
		galleryMode = galleryNode.dataset.mode || 'normal';

		if (galleryMode === 'full-screen') {
			// have a callback? function
			// that will get a root node to move full screen slides to (ie. slidesNode)

			// now
			// - take the gallery out of the flow and insert it before "slides"
			// - hide slides
			// - make it full screen

			var placeholder = document.createElement("div");
			placeholder.id = "gallery-placeholder";
			galleryNode.parentNode.replaceChild(placeholder, galleryNode);

			if (contextNode.parentNode) {
				contextNode.parentNode.insertBefore(galleryNode, contextNode);
			}
		}

		var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
		items.forEach(function (item, index) {
			if (index === 0) {
				item.className = "active";
			} else {
				item.className = "inactive";
			}
			var label = item.querySelector("label");
			var img = item.querySelector("img");

			if (galleryMode === 'full-screen') {
				img.style.display = "none";
				item.style.backgroundImage = "url(" + img.src + ")";
			} else {
				img.style.display = "";
			}

			if (!label && img.attributes.alt) {
				label = document.createElement("label");
				label.innerHTML = img.attributes.alt.value;
				item.appendChild(label);
			}
		});

		var iterations = galleryNode.dataset.iterations ?+galleryNode.dataset.iterations : 1;
		var interval = (galleryNode.dataset.interval || 1) * 1000;
		galleryTimer = setInterval(Gallery.step(items, iterations), interval);
	};

	// FIXME Gallery.stop should take elem and root nodes as well
	Gallery.stop = function (galleryNode, contextNode) {
		clearInterval(galleryTimer);

		if (galleryMode === "full-screen") {
			// - put the gallery back where it was
			var placeholder = document.getElementById("gallery-placeholder");
			placeholder.parentNode.replaceChild(galleryNode, placeholder);

			var items = Array.prototype.slice.apply(galleryNode.querySelectorAll("li"));
			items.forEach(function (item, index) {
				var img = item.querySelector("img");
				item.style.backgroundImage = "";
				img.style.display = "";
			});
		}
	};
})(window.Gallery = window.Gallery || {});(function() {
	if( typeof window.addEventListener === 'function' ) {
		var slidesNode = document.querySelector(".slides");
		Reveal.addEventListener("slidechanged", function (event) {
			var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .slideframing > .gallery');
//var galleryNode = event.previousSlide.querySelector('.gallery') || document.querySelector('.reveal > .gallery');
			if (galleryNode) {
				Gallery.stop(galleryNode, slidesNode);
			}

			galleryNode = event.currentSlide.querySelector('.gallery');
			if (galleryNode) {				
				Gallery.start(galleryNode, slidesNode);
			}

		});

		// during initial load
		if (Reveal.getCurrentSlide()) {
			var galleryNode = Reveal.getCurrentSlide().querySelector('.gallery');
			if (galleryNode) {
				Gallery.start(galleryNode, slidesNode);
			}
		}
	}
})();

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

<ul class="gallery" data-interval="2" data-iterations="0" data-mode="full-screen">
<li><img data-src="/image1.jpg"></li>
<li><img data-src="/image2.jpg"></li>
<li><img data-src="/image3.jpg"></li>
<li><img data-src="/image4.jpg"></li>
</ul>
<a class="prev" onclick="prevfunction">previous</a>
<a class="next" onclick="nextfunction">next</a>