moved styles into css file, modified slider heigth for proper rendering issue #5 #6

Merged
chris merged 1 commits from fix/height-window-load into main 2021-09-08 12:01:10 +02:00
2 changed files with 15 additions and 17 deletions
Showing only changes of commit e6e7cf44f5 - Show all commits

View File

@ -3,7 +3,7 @@
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
} }
.siema { .siema {
margin: 1rem 0; margin: 0;
background-color: #000; background-color: #000;
position: relative; position: relative;
} }
@ -12,6 +12,7 @@
display: block; display: block;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 100%;
} }
#siema-ui { #siema-ui {
@ -49,3 +50,6 @@
margin: 0; margin: 0;
align-self: center; align-self: center;
} }
.archive-carousel-container {
position: relative;
}

View File

@ -7,12 +7,7 @@
?> ?>
<style> <style>
.siema { margin: 0; } /* styles placed in carousel.css */
.siema-wrap { height: <?php echo $height ?>; }
.siema-img { width: 100%; }
#siema-ui {
/* background-color: <?php echo $ui_background ?>; */
}
</style> </style>
<div class="archive-item-block archive-carousel"> <div class="archive-item-block archive-carousel">
@ -23,15 +18,14 @@
</div> </div>
<?php } ?> <?php } ?>
<div style="position:relative;"> <div class="archive-carousel-container">
<div class="siema_<?= $carousel_id ?> siema"> <div class="siema_<?php $carousel_id ?> siema">
<?php foreach ($images as $image) { ?> <?php foreach ($images as $image) { ?>
<div class="siema-wrap" <div class="siema-wrap" style="<?php // $wrapStyle ?>"
style="<?= $wrapStyle ?>"
> >
<img class="siema-img" <img class="siema-img"
style="<?= $imgStyle ?>" style="<?php $imgStyle ?>"
src="<?= $image['media_url'] ?>" src="<?php $image['media_url'] ?>"
/> />
</div> </div>
<?php } ?> <?php } ?>
@ -41,7 +35,7 @@
<?php if ($title) { ?> <?php if ($title) { ?>
<div class="item_title"> <div class="item_title">
<?= $title ?> <?php $title ?>
</div> </div>
<?php } ?> <?php } ?>
</div> </div>
@ -50,12 +44,12 @@
var sourceURLs = []; var sourceURLs = [];
<?php foreach ($images as $image) { ?> <?php foreach ($images as $image) { ?>
sourceURLs.push("<?= $image['item_url'] ?>") sourceURLs.push("<?php $image['item_url'] ?>")
<?php } ?> <?php } ?>
$(document).ready(function() { $(document).ready(function() {
let siema = new Siema({ let siema = new Siema({
selector: '.siema_<?= $carousel_id ?>', selector: '.siema_<?php $carousel_id ?>',
easing: 'ease-out', easing: 'ease-out',
duration: <?php echo $duration ?>, duration: <?php echo $duration ?>,
perPage: <?php echo $perPage ?>, perPage: <?php echo $perPage ?>,
@ -86,7 +80,7 @@ function changeSourceURL(){
if (slide_idx < 0) { if (slide_idx < 0) {
slide_idx = sourceURLs.length -1; slide_idx = sourceURLs.length -1;
} }
var source_link = $(".siema_<?= $carousel_id ?>") var source_link = $(".siema_<?php $carousel_id ?>")
.closest(".archive-carousel") .closest(".archive-carousel")
.find(".source-link") .find(".source-link")
.find('a'); .find('a');