How to add links to an image carousel?
To answer this Stackoverflow question (can links be added to the single images of the carousel?) I tested the Jekyll image carousel from jekyllcodex.org.
This code is adding the carousel:
`
`
Page front matter adjustment
I added another url key to the images array:
1
2
3
4
5
6
7
8
carousels:
- images:
- image: /assets/images/image-1.jpg
url: post-name-1
- image: /assets/images/image-2.jpg
url: post-name-2
- image: /assets/images/image-3.jpg
url: post-name-3
Text link on the image
Put the link inside the li element:
1
2
3
4
5
6
7
8
9
<div class="carousel__track">
<ul>
{% for item in page.carousels[number].images %}
<li class="carousel__slide" style="background-image: url('{{ item.image }}');">
<a href="{{ item.url }}">{{ item.url }}</a>
</li>
{% endfor %}
</ul>
</div>
Text link on the image/slide
The link requires to be a block element: I removed the link text (inline styles for simplicity):
1
2
3
4
5
6
7
8
9
<div class="carousel__track">
<ul>
{% for item in page.carousels[number].images %}
<li class="carousel__slide" style="background-image: url('{{ item.image }}');">
<a style="text-decoration:none;display:block;width:100%;height:100%;" href="{{ item.url }}"></a>
</li>
{% endfor %}
</ul>
</div>
Send feedback!
