asset/css/carousel.css

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