Add links to jCarousel Images

Question

I am working with jQuery to add a jCarousel to my homepage on Shopify. The carousel displays and scrolls properly, but I need to add links to each of the images so that when the image is clicked, the user is directed to the specific product page.

Shopify uses a templating engine called liquid which is a variant on Ruby. I have no knowledge of Ruby or how to implement the functionality I'm seeking.

Below is the snippet where I am using the jCarousel. Can anyone suggest where to modify the code so that I create links for each of the images?

<div class="carousel-inner">
{% for i in (1..4) %}
{% capture show_slide %}slide_{{ i }}{% endcapture %}
{% capture image %}slideshow_{{ i }}.jpg{% endcapture %}
{% capture link %}slide_{{ i }}_link{% endcapture %}
{% capture link_text %}slide_{{ i }}_link_text{% endcapture %}
{% capture headline %}slide_{{ i }}_headline{% endcapture %}
{% capture content %}slide_{{ i }}_content{% endcapture %}
{% if settings[show_slide] %}
<div class="item{% if i == 1 %} active {% endif %}">
  <img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" />
  <div class="slide-container">
    <div class="container-fluid">
      <div class="carousel-caption col-md-5 col-sm-10">
        <h1>{{ settings[headline] | escape }}</h1>
        <p>{{ settings[content] | escape }}</p>
        <a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>
      </div>
    </div>
  </div>
</div>
{% endif %}
{% endfor %}

Answer 1

Looks like each slide already has a button with a link that is set in Settings:

<a class="btn btn-lg btn-default" href="{{ settings[link] | escape }}" role="button">{{ settings[link_text] | escape }}</a>

If you're not already using this functionality for something else, you could modify this code to add the link to the image itself rather than the button. Then you don't need to change anything else.

For example:

<div class="item{% if i == 1 %} active {% endif %}">
  <a href="{{ settings[link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>
  <div class="slide-container">
    ...
  </div>
</div>

If you're already using the button to link to something else, you'd need to add additional fields to Settings to hold the product links and do something like this:

{% capture image_link %}slide_{{ i }}_image_link{% endcapture %}
...
<a href="{{ settings[image_link] | escape }}"><img src="{{ image | asset_url }}" alt="{{ settings[headline] | escape }}" /></a>