Hello there,
I’m trying to show my project images in a slideshow made with Siema
It works perfectly in the first one, but the images from the rest of the projects are not appearing as a slideshow but one under the other.
I suppose I’m doing something wrong but after trying for a while I would like to ask for some advice.
This is my code:
<?php foreach (page('photography')->children()->listed() as $album): ?>
<div class="siema">
<?php foreach ($album->images() as $img): ?>
<img class="project-img" src="<?= $img->url() ?>" alt="">
<?php endforeach ?>
</div>
<div class="prev-next">
<button class="prev">Prev</button> / <button class="next">Next</button>
</div>
<div class="project-info">
<?= $album->title() ?>, <?= $album->credit() ?>
<?= $album->information()->kirbytext() ?>
<?= $album->images()->count(); ?> images
</div>
<?php endforeach ?>
</div>
Thanks in advance.
The first for each loop is looping through all the pages and repeating the whole slideshow for each child page of ‘Photography’. If you have 10 subpages to that page, the code above will give you 10 identical slideshows!
Im guessing only the first one works because Siema doesn’t not do multiple slide shows in one page.
Im also guessing that you want just one single slide show but using the content from multiple pages?
Hi, thanks for the reply.
I have for example 5 projects with 3 pictures each.
I want to create 5 different slideshows with their respective pictures on it.
Ok then its probably a javscript issue, since i think the code you posted above will do that.
If you do want multiple slides shows, one for each page, you probably need to a do for each loop in the javascript to initialise the slideshow on every instance of the .siema class. I suspect its only attatching itself to the first one and ignoring the others.
good shout @bnomei but this is a dependency free carousel. I suspect @gmzbri wants to avoid using Jquery.
i searched closed issues of github siema repo. it mentions a solution. this one above is only example i could find on codepen.
Thanks so much guys, here is the solution.
I appreciate the help!