Merge branch 'multi-carousels' into main
This commit is contained in:
commit
c527d42651
|
@ -2,11 +2,11 @@
|
||||||
display: block !important;
|
display: block !important;
|
||||||
flex-wrap: nowrap !important;
|
flex-wrap: nowrap !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.siema {
|
.siema {
|
||||||
/*margin: 1rem 0;*/
|
margin: 0; /*1rem 0;*/
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.siema-img {
|
.siema-img {
|
||||||
|
@ -16,7 +16,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
#siema-ui {
|
.siema-ui {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -35,11 +35,11 @@
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caret#left {
|
.caret-left {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.caret#right {
|
.caret-right {
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
?>
|
?>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
#siema-ui {
|
#siema-ui_<?= $carousel_id ?> {
|
||||||
/* background-color: <?php echo $ui_background ?>; */
|
background-color: <?= $ui_background ?>;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
@ -20,19 +20,22 @@
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?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) { ?>
|
<?php foreach ($images as $image) { ?>
|
||||||
<div class="siema-wrap" style="<?php // $wrapStyle ?>"
|
<div class="siema-wrap" style="<?= $wrapStyle ?>"
|
||||||
>
|
>
|
||||||
<img class="siema-img"
|
<img class="siema-img"
|
||||||
style="<?php $imgStyle ?>"
|
style="<?= $imgStyle ?>"
|
||||||
src="<?php $image['media_url'] ?>"
|
src="<?= $image['media_url'] ?>"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
</div>
|
</div>
|
||||||
<div id="siema-ui"></div>
|
<div id="siema-ui_<?= $carousel_id ?>"
|
||||||
|
class="siema-ui">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<?php if ($title) { ?>
|
<?php if ($title) { ?>
|
||||||
|
@ -44,31 +47,39 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
var sourceURLs = [];
|
var sourceURLs_<?= $carousel_id ?> = [];
|
||||||
<?php foreach ($images as $image) { ?>
|
<?php foreach ($images as $image) { ?>
|
||||||
sourceURLs.push("<?php $image['item_url'] ?>")
|
sourceURLs_<?= $carousel_id ?>.push("<?= $image['item_url'] ?>")
|
||||||
<?php } ?>
|
<?php } ?>
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(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',
|
easing: 'ease-out',
|
||||||
duration: <?php echo $duration ?>,
|
duration: <?php echo $duration ?>,
|
||||||
perPage: <?php echo $perPage ?>,
|
perPage: <?php echo $perPage ?>,
|
||||||
loop: <?php echo $loop ?>,
|
loop: <?php echo $loop ?>,
|
||||||
draggable: <?php echo $draggable ?>,
|
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): ?>
|
<?php if ($autoSlide == true): ?>
|
||||||
window.setInterval(() => {
|
window.setInterval(() => {
|
||||||
|
@ -77,17 +88,18 @@ $(document).ready(function() {
|
||||||
<?php endif ?>
|
<?php endif ?>
|
||||||
});
|
});
|
||||||
|
|
||||||
function changeSourceURL(){
|
function changeSourceURL_<?= $carousel_id ?>(){
|
||||||
var slide_idx = this.currentSlide
|
var slide_idx = this.currentSlide
|
||||||
if (slide_idx < 0) {
|
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")
|
.closest(".archive-carousel")
|
||||||
.find(".source-link")
|
.find(".source-link")
|
||||||
.find('a');
|
.find('a');
|
||||||
if (source_link.length != 0) {
|
if (source_link.length != 0) {
|
||||||
$(source_link).attr("href", sourceURLs[slide_idx])
|
$(source_link).attr("href", sourceURLs_<?= $carousel_id ?>[slide_idx])
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue