markdown 将Boundless幻灯片转换为链接

Posted 2021-05-05

**Theme:** Boundless

**Version(s) successfully tested on:** 2.5.0 and 6.4.0

**Recommended design time:** 5 mins


----

## What you have
![](https://screenshot.click/22-22-mk1ok-mhom9.png)

## What you want
![](https://screenshot.click/22-22-rllw7-un0cx.png)

----

## 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:

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

**Step 3:**

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

```js
$('.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