Minimal Theme: Making slideshow images clickable

New Member
3 0 1

Hi,

 

Another one from me today, apologies!

 

I'm looking to make my slideshow images clickable so they follow the link that I have specified in 'Button Link' field.  I don't want to add the button as that shows over the top of each image.

 

Afraid my knowledge of HTML is pretty poor so baby steps appreciated, thanks!

 

Is this possible?

1 Like
New Member
2 0 0

Hi @cheekypickle Did you find a solution to this? Can you post it here please?

0 Likes
New Member
3 0 1

Hi - Haven't found a solution yet, although I haven't got around to emailing the respondent above due to other priorities.

 

Would appreciate it if someone could post some advice here on the board so we can both benefit.

0 Likes
New Member
1 0 0

Also looking for an answer to this with no luck. 

 

Please can you post any findings here? 

0 Likes
Tourist
7 0 2

I found this thread and was able to get the new field added in the settings of the images within the slider, but the link does not work. Hope this helps someone, and if you figure it out, please post it here!

 

 

0 Likes
New Member
1 0 0

I am having the same issue!  I got the box to come up, but the slider still won't link. 

0 Likes
Shopify Partner
28 0 0

This is old slider code that allowed you to link your banner:

 

{% if settings.enable_wide_layout %}
{%- assign max_width = 1280 -%}
{% else %}
{%- assign max_width = 970 -%}
{% endif %}
{%- assign slide_width = max_width -%}

{% if section.blocks.size > 0 %}
<div class="index-section">
<div class="flexslider" id="flexslider--{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow-section" data-transition="{{ section.settings.slider_home_transition }}" data-autoplay="{{ section.settings.slider_home_auto }}" data-speed="{{ section.settings.slider_home_rate }}" data-show-dots="{{ section.settings.slider_home_show_dots }}">
<ul class="slides supports-js">
{% for block in section.blocks %}
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% if block.settings.image.width < max_width %}
{%- assign slide_width = block.settings.image.width -%}
{% endif %}

{% if block.settings.image != blank %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}<a href="{{ block.settings.link }}" class="slide-link slide-link--{{ block.id }}">{% endif %}
<img class="lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
src="{{ block.settings.image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{% if slide_width <= max_width %}{%- assign min_width = slide_width | times: 1.0 | divided_by: max_width -%}{%- assign min_width = min_width | times: 100 -%}min-width: {{ min_width }}%; {% endif %}"
alt="{{ block.settings.image.alt | escape }}">
{% if block.settings.link != blank %}</a>{% endif %}
</li>
{% else %}
<li id="slide--{{ block.id }}" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
<span class="slide-link slide-link--{{ block.id }}">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
</li>
{% endif %}
{% endfor %}
</ul>
<noscript>
{{ section.blocks[0].settings.image | img_url: '1280x', scale: 2 | img_tag: block.settings.image.alt }}
</noscript>
</div>
</div>
{% endif %}

{% schema %}
{
"name": "Slideshow",
"max_blocks": 6,
"settings": [
{
"type": "checkbox",
"id": "slider_home_auto",
"label": "Auto-rotate slides"
},
{
"type": "checkbox",
"id": "slider_home_show_dots",
"label": "Show slide indicator dots"
},
{
"type": "select",
"id": "slider_home_rate",
"label": "Change slides every",
"options": [
{
"value": "3000",
"label": "3 seconds"
},
{
"value": "4000",
"label": "4 seconds"
},
{
"value": "5000",
"label": "5 seconds"
},
{
"value": "7000",
"label": "7 seconds"
},
{
"value": "10000",
"label": "10 seconds"
},
{
"value": "15000",
"label": "15 seconds"
}
]
},
{
"type": "select",
"id": "slider_home_transition",
"label": "Transition effect",
"options": [
{
"value": "fade",
"label": "Fade"
},
{
"value": "slide",
"label": "Slide"
}
]
}
],
"blocks": [
{
"type": "image",
"name": "Slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "url",
"id": "link",
"label": "Link URL"
}
]
}
],
"presets": [
{
"name": "Slideshow",
"category": "Image",
"settings": {
"slider_home_auto": true,
"slider_home_show_dots": false,
"slider_home_rate": "7000",
"slider_home_transition": "slide"
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

0 Likes