Merge branch 'multi-carousels' into main

asset/css/carousel.css

@@ -2,11 +2,11 @@
 	display: block !important;
 	flex-wrap: nowrap !important;
 }
+
 .siema {
-	/*margin: 1rem 0;*/
+	margin: 0; /*1rem 0;*/
 	background-color: #000;
 	position: relative;
-	margin: 0;
 }
 
 .siema-img {
@@ -16,7 +16,7 @@
 	width: 100%;
 }
 
-#siema-ui {
+.siema-ui {
 	display: flex;
 	justify-content: space-between;
 	position: absolute;
@@ -35,11 +35,11 @@
 	opacity: 1;
 }
 
-.caret#left {
+.caret-left {
 	margin-left: 20px;
 }
 
-.caret#right {
+.caret-right {
 	transform: rotate(180deg);
 	margin-right: 20px;
 }

view/common/block-layout/simple-carousel.phtml

@@ -7,8 +7,8 @@
 ?>
 
 <style>
-	#siema-ui {
+	#siema-ui_<?= $carousel_id ?> {
-		/* background-color: <?php echo $ui_background ?>; */
+		 background-color: <?= $ui_background ?>;
 	}
 </style>
 
@@ -20,19 +20,22 @@
 		</div>
 	<?php } ?>
 
-	<div class="archive-carousel-container">
+	<div style="position:relative;">
-		<div class="siema_<?php $carousel_id ?> siema">
+		<div id="siema_<?= $carousel_id ?>"
+			 	 class="siema">
 			<?php foreach ($images as $image) { ?>
-					<div class="siema-wrap" style="<?php // $wrapStyle ?>"
+					<div class="siema-wrap" style="<?= $wrapStyle ?>"
 					>
 						<img class="siema-img"
-								 style="<?php $imgStyle ?>"
+								 style="<?= $imgStyle ?>"
-								 src="<?php $image['media_url'] ?>"
+								 src="<?= $image['media_url'] ?>"
 						/>
 					</div>
 			<?php } ?>
 		</div>
-		<div id="siema-ui"></div>
+		<div id="siema-ui_<?= $carousel_id ?>"
+				 class="siema-ui">
+		</div>
 	</div>
 
 	<?php if ($title) { ?>
@@ -44,31 +47,39 @@
 
 <script>
 
-var sourceURLs = [];
+var sourceURLs_<?= $carousel_id ?> = [];
 <?php foreach ($images as $image) { ?>
-	sourceURLs.push("<?php $image['item_url'] ?>")
+	sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
 <?php } ?>
 
 $(document).ready(function() {
-	let siema = new Siema({
+	let siema_<?= $carousel_id ?> = new Siema({
-		selector: '.siema_<?php $carousel_id ?>',
+		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,
+		onInit: changeSourceURL_<?= $carousel_id ?>,
-		onChange: changeSourceURL,
+		onChange: changeSourceURL_<?= $carousel_id ?>,
 	});
 
-	let caret = '<?php echo $caret;?>';
+	let caret = $('<?php echo $caret;?>');
-	let caret_r = '<?php echo $caret_r;?>';
+	$(caret).prop('id', '<?= $carousel_id ?>_left')
+	$(caret).addClass('caret-left');
+	let caret_r = $('<?php echo $caret_r;?>');
+	$(caret_r).prop('id', '<?= $carousel_id ?>_right')
+	$(caret_r).addClass('caret-right');
 
-	$('#siema-ui').append(caret);
+	$('#siema-ui_<?= $carousel_id ?>').append(caret);
-	$('#siema-ui').append(caret_r);
+	$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
 
-	$('.caret#left').click(function () {siema.prev()});
+	$('#<?= $carousel_id ?>_left').click(function () {
-	$('.caret#right').click(function () {siema.next()});
+		siema_<?= $carousel_id ?>.prev()
+	});
+	$('#<?= $carousel_id ?>_right').click(function () {
+		siema_<?= $carousel_id ?>.next()
+	});
 
 <?php if ($autoSlide == true): ?>
 	window.setInterval(() => {
@@ -77,17 +88,18 @@ $(document).ready(function() {
 <?php endif ?>
 });
 
-function changeSourceURL(){
+function changeSourceURL_<?= $carousel_id ?>(){
 	var slide_idx = this.currentSlide
 	if (slide_idx < 0) {
-		slide_idx = sourceURLs.length -1;
+		slide_idx = sourceURLs_<?= $carousel_id ?>.length -1;
+
 	}
-	var source_link = $(".siema_<?php $carousel_id ?>")
+	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])
+		$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
 	}
 
 }