Help making slideshow clickable on boundless theme

vvazquezcolina
New Member
1 0 0

Hello!

 

I've seen this request but no one has answered it yet. Care to help?

The idea is to make the whole slideshow clickable on boundless theme. 

Slideshow.liquid code is:

--

{%- if section.settings.hero_home_height == 'adapt' -%}
{%- comment -%}
'min_aspect_ratio' is the minimum aspect ratio of images shown without
whitespace when 'hero_home_height' is set to 'adapt'.
The aspect ratio values for the first image in the slideshow will be used
unless it is blank, in that case a ratio of 2:1 will be used.
{%- endcomment -%}

{%- assign first_block = section.blocks[0] -%}
{%- if first_block.settings.hero_slide.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = first_block.settings.hero_slide.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}

{%- style -%}
.hero {
height: {{- wrapper_height -}}vw !important;
overflow: hidden;
}
.hero .slick-track,
.hero .hero__slide:before {
height: {{- wrapper_height -}}vw;
}
{%- endstyle -%}
{%- endif -%}

{%- style -%}
.site-header__link,
.site-header__logo-link {
color: {{ section.settings.hero_icons_color }} !important;
}

.hero__text-title {
color: {{ section.settings.hero_icons_color }};
}

.hero__slide:after {
background-color: {{ section.settings.hero_overlay_color }};
opacity: {{ section.settings.hero_overlay_amount | divided_by: 100.00 }};
}

.hero__button-circle {
background: {{ section.settings.hero_overlay_color | color_modify: 'alpha', 0.30 }};
}

.slick-prev .icon:before,
.slick-next .icon:before,
.hero__pause .icon:before {
color: {{ section.settings.hero_icons_color }};
}

.slick-dots {
background: {{ section.settings.hero_overlay_color | color_modify: 'alpha', 0.30 }};
}

.hero__dots:before {
background-color: {{ section.settings.hero_icons_color }};
border-color: {{ section.settings.hero_icons_color }};
}

.slick-active .hero__dots:before {
background-color: transparent;
border: 2px solid {{ section.settings.hero_icons_color }};
}
{%- endstyle -%}

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section"
{%- if section.settings.hero_home_height == 'adapt' -%}
class="hero--adapt"
{%- endif -%}>
<div class="hero slideshow-{{ section.id }}"
id="Hero"
role="region"
aria-label="slideshow"
aria-describedby="slideshow-info"
tabindex="-1"
data-autoplay="{{ section.settings.hero_home_auto }}"
data-autoplayspeed="{{ section.settings.hero_home_auto_speed | times: 1000 }}"
data-adapt="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}"
data-slide-nav-a11y="{{ 'homepage.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
data-slide-nav-active-a11y="{{ 'homepage.slideshow.active_slide' | t: slide_number: '[slide_number]' }}">
{%- if section.blocks.size > 0 -%}
{%- for block in section.blocks -%}
<div id="SlickSlide{{ forloop.index }}" aria-hidden="true" class="hero__slide hero__slide--{{ block.id }}{% if block.settings.hero_slide == blank %} placeholder-background{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.hero_slide == blank -%}
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'icon icon--placeholder' }}
{%- else -%}
{% assign img_url = block.settings.hero_slide | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<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 }}"
style="object-position: {{ block.settings.image_position }}">
{%- if forloop.first == true -%}
<noscript>
<div class="hero__image-no-js hero__image--{{ block.id }}" data-image="{{ block.id }}" style="background-image: url('{{ block.settings.hero_slide | img_url: "2048x2048" }}');"></div>
</noscript>
{%- endif -%}
{%- endif -%}
<div class="hero__content-wrapper">
<div class="hero__content">
<div class="hero__content-centered">
{%- unless block.settings.hero_title == blank -%}
<h1 class="hero__text-title" itemscope itemtype="http://schema.org/Organization">
{{ block.settings.hero_title | escape }}
</h1>
{%- endunless -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
<a href="{{ block.settings.button_link }}" class="btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- endfor -%}
{%- else -%}
<div class="hero__slide placeholder-background">
{{ 'lifestyle-1' | placeholder_svg_tag: 'icon icon--placeholder' }}
</div>
{%- endif -%}
{%- if section.blocks.size > 1 -%}
{%- capture arrows_slide -%}
<ul>
<li>
<button class="hero__controls-icon slick-prev" aria-label="{{ 'homepage.slideshow.previous_slide' | t }}">
<span class="hero__button-circle"></span>
<span class="icon icon-arrow" aria-hidden="true"></span>
</button>
</li>
<li>
<button class="hero__controls-icon slick-next" aria-label="{{ 'homepage.slideshow.next_slide' | t }}">
<span class="hero__button-circle"></span>
<span class="icon icon-arrow" aria-hidden="true"></span>
</button>
</li>
</ul>
{%- endcapture -%}
<div class="hero__controls">
<div class="hero__dots-wrapper hero__dots-wrapper-desktop">
{%- if section.settings.hero_home_auto -%}
<button class="hero__pause hero__controls-icon" aria-live="polite" aria-label="{{ 'homepage.slideshow.pause' | t }}" data-label-pause="{{ 'homepage.slideshow.pause' | t }}" data-label-play="{{ 'homepage.slideshow.play' | t }}">
<span class="hero__button-circle"></span>
<span class="icon icon-pause" aria-hidden="true"></span>
<span class="icon icon-play" aria-hidden="true"></span>
</button>
{%- endif -%}
</div>
{{ arrows_slide }}
</div>
{%- endif -%}
</div>
{%- if section.settings.hero_home_height == 'adapt' -%}
<div class="hero__content-wrapper-mobile">
{%- if section.blocks.size > 1 -%}
<div class="hero__controls">
<div class="hero__dots-wrapper">
{%- if section.settings.hero_home_auto -%}
<button class="hero__pause hero__controls-icon" aria-live="polite" aria-label="{{ 'homepage.slideshow.pause' | t }}" data-label-pause="{{ 'homepage.slideshow.pause' | t }}" data-label-play="{{ 'homepage.slideshow.play' | t }}">
<span class="icon icon-pause" aria-hidden="true"></span>
<span class="icon icon-play" aria-hidden="true"></span>
</button>
{%- endif -%}
{{ arrows_slide }}
</div>
</div>
{%- endif -%}
{%- for block in section.blocks -%}
{%- assign show_link_button = false -%}
{%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
{%- assign show_link_button = true -%}
{%- endif -%}
{%- if block.settings.hero_title != blank or show_link_button -%}
<div class="hero__content-mobile text-center{% if section.blocks.size == 1 %} is-active{% endif %}" data-index="{{ forloop.index }}">
{%- unless block.settings.hero_title == blank -%}
<h2 class="{% if section.blocks.size == 1 %}hero-title-empty {% endif %}hero-title-mobile h1">
{{ block.settings.hero_title | escape }}
</h2>
{%- endunless -%}
{%- if show_link_button -%}
<a href="{{ block.settings.button_link }}" class="hero-btn-mobile btn">
{{ block.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
{%- endif -%}
{%- endfor -%}
</div>
{%- endif -%}
</div>
<p id="slideshow-info" class="visually-hidden" aria-hidden="true">
{{- 'homepage.slideshow.navigation_instructions' | t -}}
</p>

{% schema %}

0 Likes