How to add links to an image carousel?
For this Stackoverflow question, I have had the chance to test a Jekyll image carousel from jekyllcodex.org.
The code is adding the carousel below.
The question was whether and how it’s possible to add links to the single images.
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!
