如何将下一个/上一个按钮添加到一个简单的bg-image画廊中，以揭示.js？

Question

我想将上一个/下一个按钮集成到下面的现有画廊中。这里有一个画廊的示例：https://junkheap.net/examples/revealjs-gallery/#/2，但我想离线使用画廊作为演示文稿（但这不会对代码有所影响）

总而言之，我只是想在我正在使用的图库中添加上一个和下一个按钮，并且我不需要现在具有的自动前进间隔，但是我需要使用该特定的图库代码，因为它可以处理我的reveal.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>