asset/css/carousel.css

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

src/Site/BlockLayout/Carousel.php

@@ -34,7 +34,7 @@ class Carousel extends AbstractBlockLayout
     }
 
 	public function getLabel() {
-		return 'Carousel';
+		return 'Image Carrousel';
 	}
 
 	public function form(PhpRenderer $view, SiteRepresentation $site,
@@ -92,9 +92,10 @@ class Carousel extends AbstractBlockLayout
 				}
 			}
 		}
-    $wrap = $block->dataValue('wrapStyle') . 'height:'.$block->dataValue('height').';';
+
 		return $view->partial('common/block-layout/simple-carousel', [
       'carousel_id' => 'ic_' . ++$id,
+			'height' => $block->dataValue('height'),
 			'duration' => $block->dataValue('duration'),
 			'perPage' => $block->dataValue('perPage'),
 			'loop' => $block->dataValue('loop'),
@@ -103,7 +104,7 @@ class Carousel extends AbstractBlockLayout
       'images' => $images,
 			'autoSlide' => $block->dataValue('autoSlide'),
 			'autoSlideInt' => $block->dataValue('autoSlideInt'),
-			'wrapStyle' => $wrap,
+			'wrapStyle' => $block->dataValue('wrapStyle'),
 			'imgStyle' => $block->dataValue('imgStyle'),
 			'ui_background' => $block->dataValue('ui_background'),
       'renderSourceLink' => $block->dataValue('renderSourceLink'),

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

@@ -7,9 +7,7 @@
 ?>
 
 <style>
-	#siema-ui_<?= $carousel_id ?> {
+/* styles placed in carousel.css */
-		 background-color: <?= $ui_background ?>;
-	}
 </style>
 
 <div class="archive-item-block archive-carousel">
@@ -20,66 +18,55 @@
 		</div>
 	<?php } ?>
 
-	<div style="position:relative;">
+	<div class="archive-carousel-container">
-		<div id="siema_<?= $carousel_id ?>"
+		<div class="siema_<?php $carousel_id ?> siema">
-			 	 class="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 ?>"
+								 style="<?php $imgStyle ?>"
-								 src="<?= $image['media_url'] ?>"
+								 src="<?php $image['media_url'] ?>"
 						/>
 					</div>
 			<?php } ?>
 		</div>
-		<div id="siema-ui_<?= $carousel_id ?>"
+		<div id="siema-ui"></div>
-				 class="siema-ui">
-		</div>
 	</div>
 
 	<?php if ($title) { ?>
 	<div class="item_title">
-		<?= $title ?>
+		<?php $title ?>
 	</div>
 	<?php } ?>
 </div>
 
 <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({
+	let siema = new Siema({
-		selector: '#siema_<?= $carousel_id ?>',
+		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 ?>,
+		onInit: changeSourceURL,
-		onChange: changeSourceURL_<?= $carousel_id ?>,
+		onChange: changeSourceURL,
 	});
 
-	let caret = $('<?php echo $caret;?>');
+	let caret = '<?php echo $caret;?>';
-	$(caret).prop('id', '<?= $carousel_id ?>_left')
+	let caret_r = '<?php echo $caret_r;?>';
-	$(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_<?= $carousel_id ?>').append(caret);
+	$('#siema-ui').append(caret);
-	$('#siema-ui_<?= $carousel_id ?>').append(caret_r);
+	$('#siema-ui').append(caret_r);
 
-	$('#<?= $carousel_id ?>_left').click(function () {
+	$('.caret#left').click(function () {siema.prev()});
-		siema_<?= $carousel_id ?>.prev()
+	$('.caret#right').click(function () {siema.next()});
-	});
-	$('#<?= $carousel_id ?>_right').click(function () {
-		siema_<?= $carousel_id ?>.next()
-	});
 
 <?php if ($autoSlide == true): ?>
 	window.setInterval(() => {
@@ -88,18 +75,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])
 	}
 
 }