Cacher is the code snippet organizer for pro developers

Theme: Boundless

Version(s) successfully tested on: 2.5.0 and 6.4.0

Recommended design time: 5 mins

---

What you have

What you want

---

What you do

Step 1: Open Sections > slideshow.liquid and find the <img class="hero__image elements. There will be 2 of them.

We're going to add another data attribute to it for the link setting.

data-link="{{ block.settings.slide_link }}"

It will look like this when you're done.

          <img class="hero__image hero__image--{{ block.id }} lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
            {% if forloop.first == true %}
              src="{{ block.settings.hero_slide | img_url: '300x' }}"
            {% endif %}
            data-src="{{ img_url }}"
            data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
            data-aspectratio="{{ block.settings.hero_slide.aspect_ratio }}"
            data-sizes="auto"
            data-parent-fit="cover"
            alt="{{ block.settings.hero_slide.alt | escape }}"
\!h             data-link="{{ block.settings.slide_link }}">

The second one has less parameters, so takes up fewer lines but similar formatting.

Step 2:

Add the following to the end of the block settings:

     {
       "type": "text",
       "id": "slide_link",
       "label": "Slide link",
       "default": "/"
     }

Step 3:

Add the following to the end of Assets > theme.js.liquid

$('.hero-wrapper').click(function(event) {
  if($('.slick-active').find('.hero__image').attr("data-link") != "") {
    window.location.href = ($('.slick-active').find('.hero__image').attr("data-link"));
  }
});

---

Additional notes:

Alternative keywords: slideshow