{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
<style>
/* Reset básico para o slideshow */
.slideshow {
width: 100%;
position: relative;
overflow: hidden;
margin-bottom: 0;
}
/* Container principal do slide */
.slideshow__slide {
width: 100%;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Container da mídia */
.slideshow__media {
width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
/* Estilos para telas ultrawide (acima de 2560px) */
@media screen and (min-width: 2561px) {
.slideshow__media {
aspect-ratio: 21/9;
max-width: 3840px;
margin: 0 auto;
}
.slideshow__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
/* Estilos para monitores grandes (1921px a 2560px) */
@media screen and (min-width: 1921px) and (max-width: 2560px) {
.slideshow__media {
aspect-ratio: 16/7;
max-width: 2560px;
margin: 0 auto;
}
.slideshow__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
/* Estilos para desktop padrão (768px a 1920px) */
@media screen and (min-width: 768px) and (max-width: 1920px) {
.slideshow__media {
aspect-ratio: 16/9;
max-height: 90vh;
}
.slideshow__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
/* Estilos para mobile */
@media screen and (max-width: 767px) {
.slideshow__media {
aspect-ratio: 9/16;
max-height: 90vh;
}
.slideshow__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
/* Ajustes para o banner */
.banner--adapt_image {
height: auto !important;
}
/* Remover altura fixa do slide */
.slider__slide {
height: auto !important;
}
/* Ajuste para o conteúdo do banner */
.banner__content {
position: absolute;
z-index: 5;
}
/* Container central para limitar largura em telas muito grandes */
@media screen and (min-width: 1921px) {
.slideshow-wrapper {
max-width: 100%;
margin: 0 auto;
overflow: hidden;
}
}
/* Estilo para links de slide completos */
.slide-wrapper {
position: relative;
width: 100%;
height: 100%;
display: block;
}
/* Estilos para z-index e controle */
.slideshow__controls {
position: relative;
z-index: 10;
}
/* Garantir que os botões sejam clicáveis */
.button-link {
position: relative;
z-index: 15;
cursor: pointer;
}
.slider-button, .slideshow__autoplay, .slider-counter__link {
z-index: 20;
position: relative;
}
/* Estilo para imagens com link */
.linked-image {
cursor: pointer;
}
</style>
<slideshow-component
class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
role="region"
aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
aria-label="{{ section.settings.accessibility_info | escape }}"
>
{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
<div class="slideshow__controls slideshow__controls--top slider-buttons{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
{%- if section.settings.slider_visual == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}"
>
{%- if section.settings.slider_visual == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<span class="dot"></span>
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
{%- if section.settings.auto_rotate -%}
<button
type="button"
class="slideshow__autoplay slider-button{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-pause.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-play.svg' | inline_asset_content -}}
</span>
</button>
{%- endif -%}
</div>
{%- endif -%}
<div
class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
id="Slider-{{ section.id }}"
aria-live="polite"
aria-atomic="true"
data-autoplay="{{ section.settings.auto_rotate }}"
data-speed="{{ section.settings.change_slides_speed }}"
style="position: relative; z-index: 1;"
>
{%- for block in section.blocks -%}
<style>
#Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
}
</style>
<div
class="slideshow__slide grid__item grid--1-col slider__slide"
id="Slide-{{ section.id }}-{{ forloop.index }}"
{{ block.shopify_attributes }}
role="group"
aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
tabindex="-1"
>
{% comment %} Verificando se esse slide tem um link {% endcomment %}
{% if block.settings.link != blank %}
{% assign has_slide_link = true %}
{% else %}
{% assign has_slide_link = false %}
{% endif %}
{% if has_slide_link %}
<a href="{{ block.settings.link }}" class="slide-wrapper slide-link-{{ forloop.index }}" onclick="window.location.href='{{ block.settings.link }}';" style="position: relative; z-index: 2; display: block; cursor: pointer;">
{% else %}
<div class="slide-wrapper">
{% endif %}
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
{%- if block.settings.image -%}
<picture>
<!-- Imagem para mobile (até 767px de largura) -->
<source
srcset="{{ block.settings.image_mobile | image_url: width: 750 }}"
media="(max-width: 767px)"
>
<!-- Imagem para desktop (768px ou mais) -->
<source
srcset="{{ block.settings.image | image_url: width: 3840 }}"
media="(min-width: 768px)"
>
<!-- Imagem padrão (caso nenhuma das condições acima seja atendida) -->
<img
src="{{ block.settings.image | image_url: width: 3840 }}"
alt="{{ block.settings.image.alt | escape }}"
loading="lazy"
width="{{ block.settings.image.width }}"
height="{{ block.settings.image.height }}"
style="object-fit: cover; width: 100%; height: 100%;"
{% if has_slide_link %}class="linked-image"{% endif %}
>
</picture>
{%- else -%}
{%- assign placeholder_slide = forloop.index | modulo: 2 -%}
{%- if placeholder_slide == 1 -%}
{{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endif -%}
</div>
<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
{%- if block.settings.heading != blank -%}
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
{{ block.settings.heading }}
</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text rte" {{ block.shopify_attributes }}>
<p>{{ block.settings.subheading }}</p>
</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<div class="banner__buttons">
<a
{% if block.settings.link != blank %}
href="{{ block.settings.link }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %} button-link"
onclick="event.stopPropagation();"
>
{{- block.settings.button_label | escape -}}
</a>
</div>
{%- endif -%}
</div>
</div>
{% if has_slide_link %}
</a>
{% else %}
</div>
{% endif %}
</div>
{%- endfor -%}
</div>
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
<div class="slideshow__controls slider-buttons{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
{%- if section.settings.slider_visual == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}"
>
{%- if section.settings.slider_visual == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<span class="dot"></span>
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
<span class="svg-wrapper">
{{- 'icon-caret.svg' | inline_asset_content -}}
</span>
</button>
{%- if section.settings.auto_rotate -%}
<button
type="button"
class="slideshow__autoplay slider-button{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
>
<span class="svg-wrapper">
{{- 'icon-pause.svg' | inline_asset_content -}}
</span>
<span class="svg-wrapper">
{{- 'icon-play.svg' | inline_asset_content -}}
</span>
</button>
{%- endif -%}
</div>
{%- endif -%}
</slideshow-component>
{%- if request.design_mode -%}
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
<script>
// Script para garantir que os cliques em botões não sejam propagados para o slide
document.addEventListener('DOMContentLoaded', function() {
// Verificar e corrigir o primeiro slide
const firstSlide = document.querySelector('.slider__slide:first-child');
if (firstSlide) {
const slideLink = firstSlide.querySelector('.slide-wrapper');
if (slideLink && slideLink.tagName === 'A') {
slideLink.style.zIndex = '2';
slideLink.style.position = 'relative';
slideLink.style.display = 'block';
}
}
// Garantir que todos os links de slide estejam funcionando
const allSlideLinks = document.querySelectorAll('.slide-wrapper');
allSlideLinks.forEach(function(link) {
if (link.tagName === 'A') {
link.style.zIndex = '2';
link.style.position = 'relative';
link.style.display = 'block';
// Adicionar classe para depuração visual
link.classList.add('active-slide-link');
}
});
var buttonLinks = document.querySelectorAll('.button-link');
buttonLinks.forEach(function(button) {
button.addEventListener('click', function(e) {
// Se o botão estiver dentro de um slide com link
if (this.closest('.slide-wrapper').tagName === 'A') {
e.preventDefault();
e.stopPropagation();
// Usar o link do slide para navegação
if (this.closest('.slide-wrapper').getAttribute('href')) {
window.location.href = this.closest('.slide-wrapper').getAttribute('href');
}
}
});
});
// Impedir que cliques nos controles de navegação ativem os links do slide
var slideControls = document.querySelectorAll('.slider-button, .slider-counter__link, .slideshow__autoplay');
slideControls.forEach(function(control) {
control.addEventListener('click', function(e) {
e.stopPropagation();
});
});
// Adicionar classe de depuração para verificar se os links estão ativos
document.querySelectorAll('.slider__slide').forEach(function(slide, index) {
slide.classList.add('slide-' + (index + 1));
});
});
</script>
<style>
/* Estilos adicionais para garantir que os links funcionem */
.active-slide-link {
cursor: pointer !important;
}
/* Fix para o primeiro slide */
.slider__slide:first-child .slide-wrapper[href] {
position: relative !important;
z-index: 2 !important;
display: block !important;
}
</style>
{% schema %}
{
"name": "SlideshowRodrigo",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "layout",
"options": [
{
"value": "full_bleed",
"label": "Full width"
},
{
"value": "grid",
"label": "Contained"
}
],
"default": "full_bleed",
"label": "Layout"
},
{
"type": "select",
"id": "slide_height",
"options": [
{
"value": "adapt_image",
"label": "Adapt to image"
},
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
],
"default": "medium",
"label": "Slide height"
},
{
"type": "select",
"id": "slider_visual",
"options": [
{
"value": "dots",
"label": "Dots"
},
{
"value": "counter",
"label": "Counter"
},
{
"value": "numbers",
"label": "Numbers"
}
],
"default": "counter",
"label": "Slider navigation"
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "Auto-rotate slides",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 9,
"step": 2,
"unit": "s",
"label": "Change slides every",
"default": 5
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "checkbox",
"id": "show_text_below",
"label": "Show text below image on mobile",
"default": true
},
{
"type": "header",
"content": "Accessibility"
},
{
"type": "text",
"id": "accessibility_info",
"label": "Accessibility label",
"info": "Describe the slideshow for screen readers.",
"default": "Slideshow about our brand"
}
],
"blocks": [
{
"type": "slide",
"name": "Slide",
"limit": 5,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image (Desktop)"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Image (Mobile)"
},
{
"type": "inline_richtext",
"id": "heading",
"default": "Slide heading",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "Small"
},
{
"value": "h1",
"label": "Medium"
},
{
"value": "h0",
"label": "Large"
}
],
"default": "h1",
"label": "Heading size"
},
{
"type": "inline_richtext",
"id": "subheading",
"default": "Slide subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "Button label"
},
{
"type": "url",
"id": "link",
"label": "Slide link"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"label": "Use secondary button style",
"default": false
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "Top left"
},
{
"value": "top-center",
"label": "Top center"
},
{
"value": "top-right",
"label": "Top right"
},
{
"value": "middle-left",
"label": "Middle left"
},
{
"value": "middle-center",
"label": "Middle center"
},
{
"value": "middle-right",
"label": "Middle right"
},
{
"value": "bottom-left",
"label": "Bottom left"
},
{
"value": "bottom-center",
"label": "Bottom center"
},
{
"value": "bottom-right",
"label": "Bottom right"
}
],
"default": "middle-center",
"label": "Text alignment"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "Show text box",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center",
"label": "Text alignment"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "Image overlay opacity",
"default": 0
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color scheme",
"default": "scheme-1"
},
{
"type": "header",
"content": "Mobile"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center",
"label": "Text alignment (mobile)"
}
]
}
],
"presets": [
{
"name": "Slideshow com Imagens Mobile",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}
