I am currently building a slider with owl carousel which is no problem only with images, but I need to add a headline to each image with a link (around the image – text on the image).
You might want to check out this answer on SO. Looks like OwlCarousel has been taken over and there’s a new beta but there are of course lot of alternatives.
Thank you, but the styling is no problem, I can do it hard coded. But I am looking for a way to add individual text to each image, which can be done by somebody without coding knowledge.
Oh, I see, yes, you can add meta data to images, either via the panel (see here how to add fields to your blueprints), or you can add text files manually, then the text files must have the same name as the image, e.g.
myimage.jpg => myimage.jpg.txt
Then you can call these fields in your templates like this:
<div id="homeowl" class="owl-carousel">
<?php if($page->children()->count() > 0): ?>
<?php foreach($page->children()->find('gallery')->images() as $image): ?>
<div class="startsilder">
<a href="<?php echo $image->link() ?>">
<img src="<?php echo $image->url() ?>" alt="">
</a>
<div class="homecaption"><?php echo $caption = $image->caption(); ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div>
```
I assume that your link is in the meta data file, otherwise it should be `$page->link()` of course.
i also want to create a slider with text and button (by using owl-carousel, caption and copy text on each image, the button is only on the first slide) on slides (i have four slides all in all). i use this code (the same which was posted here by texnixe):
when i am trying to add additional text (under caption) by adding the second div beneath - it’s not working properly, because suddenly (after adding the second div) i am able to see two slides (in a column) with caption on the first slide and the copy text on the second slide. Could someone give me a hint how to do this? i am new to kirby and php, so i really could use some help.
But unfortunately it still doesn’t work as I want it to work. Now I see two images in a column, on the first there is the caption, on the second the copy and under the second slider - there is a small part of the third slide visible on which the button is displayed and all of these 3 elements should be displayed on one slider. So i guess the code still has to be changed somehow.
Do I need this part of code (below) if i am already looping on each image from gallery in the beginning:
<img src="<?= $image->url() ?>" alt="">
sorry if the questions are stupid or really easy to solve!
yes, I do, but I have 4 different images all in all. So i don’t know if it makes sense to output only one of them, because the url path provides only one particular image. but it still shows 2 images in a column, so it’s not how i want the slider to look. okay, i will try to figure out how to fix it and make it work
Maybe there is something wrong with your slider initialization rather then with the markup. The code does not only output one image tag, but one image tag for each image in the loop. Have you set the number of items to show in the init code to 1?
Have you checked if the markup you end up with when you check the source code in your browser is what you expect it to be (before the JS kicks in, disable JS)?
time for a break and thank you very very much!