Dear Forum!
I’m new to Kirby 3 and trying to find a way to implement a carousel / image slideshow to my page. Therefore I have been searching Kirby’s resources, this forum as well as the www — without any success. All I found was a plugin for Kirby 2 (GitHub - medienbaecker/kirby-images) but it says that it is now part of Kirby 3’s core … 
Any help would be really appreciated!
Since the frontend is your domain, implementing a carousel or image slideshow is actually up to you, there are no plugins for that.
Basically, you usually choose a JavaScript library, include the CSS/JS files that come with this library in your html head (or footer), initiate it and create the HTML markup according to the library’s documentation.
It is also possible to do a simple slideshow only with CSS: A simple carousel with a few lines of CSS | pawelgrzybek.com
Dear @texnixe —
Thank you very much for your reply!
As I am not a pro it’s pretty hard to understand how to implement a JavaScript library. I’ve downloaded one from here — but I really can’t find an instruction on the Kirby page which explains what to do which such library, and how to show it in the panel like the plugin in this video.
Any further guidances would be really helpful!
Just to get that right: You want to show your slider on the frontend, not in the Panel, right?
And regarding your knowledge: Do you know how to do such things in plain HTML?
Yes, the slider should be appear in the frontend. But it would be great if it would be possible to manage it in the panel — just like it’s shown in the description of the one for Kirby 2 which I mentioned in the initial post.
Regarding my knowledge: I don’t get how to integrate this library in Kirby — for instance in which folder I have to put it and how to set links to its files. And how to show its functionality in the panel … I don’t know if the last point if is even possible or if this just works with Kirby plugins.
Following Kirby’s Plugins Guide unfortunately led to nothing …
in codepen you will find a large number of slider examples, it also determines which ones can do without js, which makes things a little easier at the beginning.
For the Panel, you can either use a files field to select files from the uploaded files, or you use all files you uploaded through a section. Adding the slider functionality to the Panel would need a plugin and I wouldn’t recommend that for a beginner.
As regards the frontend, you would include the library itself in the head tag, which is located in /site/snippets/header.php
Then initialize in the footer (/site/snippets/footer.php)
You can use the js() helper to load the library: js() | Kirby CMS
Assuming you are using the Starterkit.
I’d recommend you get familiar with Kirby’s structure first by going through the Get Started guide
The library you selected hasn’t seen any development for more than 2 years…
Thank you very much for your replies @texnixe and @Perry!
I was watching the Get Started Guide many times before I started in order to see if Kirby is the right thing for me. And as it seems to be a lot more flexible than other CMS I decided to start this adventure with the plain kit. With the help of those videos I was able to set everything up … Except the slider / carousel — which unfortunately should became the key feature on my website.
Following Perry’s advise I’ve found a carousel that might fit my expectations: https://codepen.io/vsync/pen/YzZBWa
So I’ve created two files in my assets/js folder — jquery-3.6.3.min.js and hover-carousel.js (which contains the js from the codepen page.
In my header.php I wrote <?= js('assets/js/jquery-3.6.3.min.js') ?> <?= js('assets/js/hover-carousel.js') ?>
And then I’ve created a snippet which contains the Codepen code from the HTML window at the left side. In my home.php I wrote snippet('hover-carousel'); …
On my front page I can see all the HTML code which I’ve put in my hover-carousel.php now. I assume this is because the copied HTML is missing something.
What am I doing wrong?
What exactly is in your snippet now? The code from repo on Github doesn’t need jquery, that will just slow down your site.
Note that you also need the styles…
The code I’m using is from this side: https://codepen.io/vsync/pen/YzZBWa
And so in my hover-carousel.php it says:
-
var images = [
'https://cdn.pixabay.com/photo/2016/10/13/00/03/girl-1736419__340.jpg',
'http://ppcdn.500px.org/72233281/5e145f8f95427805045dbaf1ec2cf17bcb4b25b3/3.jpg',
'http://ppcdn.500px.org/72190239/1ac03d25646f92afd4d80ed8e6f2c1cfc78635b5/4.jpg',
'http://ppcdn.500px.org/58739696/b0c33312552e8581ef457720bb924f16421dcec8/3.jpg',
'http://ppcdn.500px.org/43028892/84b059f25810f07962ae46e63c44c625b2f9b9e6/2048.jpg',
'https://cdn.pixabay.com/photo/2017/09/21/07/47/girl-2771001__340.jpg',
'https://cdn.pixabay.com/photo/2018/03/12/12/32/woman-3219507__340.jpg'
]
.carousel
.wrap
ul
each image in images
li
img(src=image)
For me it doesn’t look like proper HTML … But it seems to be working on that codepen page though.
I took the css from that codepen example and put it in my index.css.
And somehow I’ve managed it that this code doesn’t appear on my front page any longer. But there is also still now slider.
Because that is Pug, not HTML, you can convert to HTML using the dropdown in the upper right of that window. Same for SCSS, which needs to be compiled to CSS.
Great, that was it — thank you!
The only strange thing is, that I only can see the slider — but nothing to navigate through the images. Could it be that the js file doesn’t load properly? I mean in the source code of my page I can see that there’s a link to that js file — and I also can open it.
On the github page of that slider under “How to use” it says var carouselElm = document.querySelector('.carousel') new HoverCarousel(carouselElm) — should that somehow be relevant for me?
Yes, you have to initialize the slider with that code, in a script tag in the footer.
From where did you copy the js file, from the GitHub repo?
The one in my current js file is from codepen and the short code is from github …
The two lines that initialize the carousel are part of the code you copied from codepen. However, those should be removed from that file you and instead go into a script tag in your footer.
Note that this is nothing Kirby specific, just based web dev stuff.
With you help the slider is working now — thank you again!
Now I’d like to let the slider show the images which are in a folder called “1_hover-carousel“. Therefore I’ve created a hover-carousel.php with the following code inside:
<div class="carousel">
<div class="wrap">
<ul>
<?php foreach ($page->images() as $image) :?>
<li><a href="<?= $image->url() ?>"><?= $image ?></a></li>
<?php endforeach ?>
</ul>
</div>
</div>
As the slider on my frontpage is empty I assume something is wrong with this code …
Any help would be really appreciated!
Frontpage is usually rendered via the home.php template. But if your images are in a page hover-carousel, then you need to fetch your images from there. The variable $page refers to the current page.
Assuming this hover-carousel page sits next to home/error (i.e. first level pages):
<?php if ($p = page('hover-carousel')): ?>
<div class="carousel">
<div class="wrap">
<ul>
<?php foreach ($p->images() as $image) :?>
<li><a href="<?= $image->url() ?>"><?= $image ?></a></li>
<?php endforeach ?>
</ul>
</div>
</div>
<?php endif ?>
Great — now the images are being loaded!
But for some reason the css isn’t working on these images. When I take
<ul> <li> <img src="https://cdn.pixabay.com/photo/2016/10/13/00/03/girl-1736419__340.jpg"/></li> <li> <img src="http://ppcdn.500px.org/72233281/5e145f8f95427805045dbaf1ec2cf17bcb4b25b3/3.jpg"/></li> <li> <img src="http://ppcdn.500px.org/72190239/1ac03d25646f92afd4d80ed8e6f2c1cfc78635b5/4.jpg"/></li> <li> <img src="http://ppcdn.500px.org/58739696/b0c33312552e8581ef457720bb924f16421dcec8/3.jpg"/></li> <li> <img src="http://ppcdn.500px.org/43028892/84b059f25810f07962ae46e63c44c625b2f9b9e6/2048.jpg"/></li> <li> <img src="https://cdn.pixabay.com/photo/2017/09/21/07/47/girl-2771001__340.jpg"/></li> <li> <img src="https://cdn.pixabay.com/photo/2018/03/12/12/32/woman-3219507__340.jpg"/></li> </ul>
instead of
<ul> <?php foreach ($p->images() as $image) :?> <li><a href="<?= $image->url() ?>"><?= $image ?></a></li> <?php endforeach ?> </ul>
it works like it should. Do you possibly have an idea why css isn’t working with this code?
This goes really beyond Kirby support, but my guess is the difference in your markup (i.e. you have added an additional anker wrapper around the image).
Your hint solved the problem — thanks a ton Sonja!
<a href="<?= $image->url() ?>"></a>
was causing the problem.
I’ve just left <?= $image ?> — and everything is fine for the moment.