SimpleCarousel-omeka-module/view/common/block-layout/simple-carousel.phtml

<?php
	$this->headLink()->appendStylesheet($this->assetUrl('css/carousel.css', 'SimpleCarousel'));
	$this->headScript()->appendFile($this->assetUrl('js/siema.min.js', 'SimpleCarousel'));

	$title = false;

	$caret = sprintf('<img class="caret" id="left" src="%s">', $this->assetUrl('caret.png', 'SimpleCarousel'));
	$caret_r = sprintf('<img class="caret" id="right" src="%s">', $this->assetUrl('caret.png', 'SimpleCarousel'));
?>

<style>
	.siema { margin: 0; }
	.siema-wrap { height: <?php echo $height ?>; }
	.siema-img { width: 100%; }
	#siema-ui {
		/* background-color: <?php echo $ui_background ?>; */
	}
</style>

<div class="archive-carousel">

	<?php if ($renderSourceLink) { ?>
		<div class="source-link">
			<a href="">Source</a>
		</div>
	<?php } ?>

	<div style="position:relative;">
		<div class="siema_<?= $carousel_id ?> siema">
			<?php foreach ($images as $image) { ?>
					<div class="siema-wrap"
							 style="<?= $wrapStyle ?>"
					>
						<img class="siema-img"
								 style="<?= $imgStyle ?>"
								 src="<?= $image['media_url'] ?>"
						/>
					</div>
			<?php } ?>
		</div>
		<div id="siema-ui"></div>
	</div>
	<?php if ($subTitle) { ?>
		<div class="item_title">
			<?= $subTitle ?>
		</div>
	<?php } ?>
</div>

<script>

var sourceURLs = [];
<?php foreach ($images as $image) { ?>
	sourceURLs.push("<?= $image['item_url'] ?>")
<?php } ?>

$(document).ready(function() {
	let siema = new Siema({
		selector: '.siema_<?= $carousel_id ?>',
		easing: 'ease-out',
		duration: <?php echo $duration ?>,
		perPage: <?php echo $perPage ?>,
		loop: <?php echo $loop ?>,
		draggable: <?php echo $draggable ?>,
		onInit: changeSourceURL,
		onChange: changeSourceURL,
	});

	let caret = '<?php echo $caret;?>';
	let caret_r = '<?php echo $caret_r;?>';

	$('#siema-ui').append(caret);
<?php if ($title !== false): ?>
	$('#siema-ui').append('<?php echo $title;?>');
<?php endif ?>
	$('#siema-ui').append(caret_r);

	$('.caret#left').click(function () {siema.prev()});
	$('.caret#right').click(function () {siema.next()});

<?php if ($autoSlide == true): ?>
	window.setInterval(() => {
		siema.next();
	}, <?php echo $autoSlideInt; ?>);
<?php endif ?>
});

function changeSourceURL(){
	var slide_idx = this.currentSlide
	if (slide_idx < 0) {
		slide_idx = sourceURLs.length -1;
	}
	var source_link = $(".siema_<?= $carousel_id ?>")
										.closest(".archive-carousel")
										.find(".source-link")
										.find('a');
	if (source_link.length != 0) {
		$(source_link).attr("href", sourceURLs[slide_idx])
	}

}

</script>