Controle deslizante de imagem do produto para o tema Shopify Dawn - versão 2.4 e inferior

<div class="slider-container" >
{{ section.id }}
{{ "accessibility.skip_to_product_info" | t }}
</a>
<ul class="imagemgrande" id="imagemgrande">
{%- for media in product.media -%}
<li class="item de imagem grande produto__item de mídia grid__item slider__slide
{% if media.media_type != 'image' %} hide-modal {% endif %} "
data-media-id=" {{ section.id }} - {{ media.id }} ">
{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
</li>
{%- endfor -%}
</ul>

<componente deslizante>
<ul class="product-slider-box slider" role="list">

{%- assign variant_images = product.images| where: 'attached_to_variant?', true | map: 'src' -%}

{%- for media in product.media -%}
<li class="product-slider slider__slide" onclick="newLargeImage(this)" data-media-id=" {{ section.id }} - {{ media.id }} "

{% if section.settings.hide_variants and variant_images contains media.src %} style="display: none;" {% endif %} >

{% if media.media_type == 'video' %}
<div class="video-btn" style="display: bloco" >
<span class="product__media-icon motion-reduce v-btn" aria-hidden="true">
{%- liquid
case media.media_type
when 'video' or 'external_video'
render 'icon-play'
when 'model'
render 'icon-3d-model'
else
render 'icon-zoom'
endcase
-%}
</span>
<img class="imagem-slide"
src=" {{ media.preview_image | img_url: 'large' }} "
alt=" {{media.alt }} ">
</div>
{% else %}
<img class="imagem-slide"
src=" {{ media.preview_image | img_url: 'large' }} "
alt=" {{ media.alt}} ">
{% endif %}
</li>
{% endfor %}
</ul>
<div class="slider-buttons {% if product.media.size < 5 %} oculto {% endif %} " style="display: flex">
<button type="button" class="slider-button slider-button--prev maior-slider" name="anterior" aria-label=" {{ 'accessibility.previous_slide' | t }} "> {% render 'icon-caret' %} </button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden"> {{ 'accessibility.of' | t }} </span>
<span class="slider-counter--total"> {% if section.settings.hide_variants %} {{ product.media.size | minus: variant_images.size | plus: 1 }} {% else %} {{ product.media.size }} {% endif %} </span>
</div>
<button type="button" class="slider-button slider-button--next large-slider" name="next" aria-label=" {{ 'accessibility.next_slide' | t }} "> {% render 'icon-caret' %} </button>
</div>
</slider-component>
</div>

<roteiro>

janela.onload = (evento) => {
document.querySelector("li:nth-child(1) > img").classList.add('active-thumb');
};

função novaImagemGrande(x) {
deixe clickedImage = x.dataset.mediaId;
const newImage = document.querySelector(`[data-media-id="${clickedImage}"]`);
const parentData = newImage.parentElement;

parentData.prepend(newImage);
newImage.style.display = "bloquear";

document.querySelectorAll('.slide-image')
.forEach(thumb => polegar. classList.remove('active-thumb'));
const sliderComp = document.querySelector("componente deslizante");
document.querySelector(`[data-media-id="${clickedImage}"] > img`).classList.add('active-thumb');
};
</script>

.slider-container {
margem: 0 automático;
largura: 100%;
estouro: automático;
exibição: flexível;
flex-flow: quebra de coluna;
alinhar itens: centro;
posição: relativa;
}

.imagem grande {
largura: 100%;
posição: relativa;
estouro: oculto;
}

.item de imagem grande {
largura máxima: 100%;
largura mínima: 50%;
altura máxima: 100%;
preenchimento: 0;
}

.item de imagem grande:not(:primeiro-filho){
exibição: nenhum !importante;
}

você {
padding-inline-start: 0px! Importante;
}

componente deslizante {
posição: relativa;
exibição: bloco;
largura:100%;
}

.slider__slide {
scroll-snap-align: iniciar;
flex-encolher: 0;
}

.product-slider-box {
flex-wrap: herdar;
estouro-x: automático;
scroll-snap-type: x obrigatório;
comportamento de rolagem: suave;
-webkit-overflow-scrolling: toque;
margem inferior: 1rem;
largura: 100%;
exibição: flexível;
}

.product-slider {
altura: 100%;
largura: 23%;
display: bloco embutido;
}

.product-slider:not(:first-child){
margem esquerda: 1rem;
}

.slide-imagem {
largura: 100%;
altura: 100%;
ajuste ao objeto: capa;
}

.slider{
cor da barra de rolagem: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0,04);
-ms-estilo overflow: nenhum;
largura da barra de rolagem: nenhuma;
}

.slider::-webkit-barra de rolagem {
altura: 0,4rem;
largura: 0,4rem;
Mostrar nenhum;
}

.no-js.slider {
-ms-estilo overflow: automático;
largura da barra de rolagem: automático;
}

.no-js .slider::-webkit-scrollbar {
exibição: inicial;
}

.slider::-webkit-scrollbar-thumb {
cor de fundo: rgb(var(--color-foreground));
raio da borda: 0,4rem;
borda: 0;
}

.slider::-webkit-scrollbar-track {
plano de fundo: rgba(var(--color-foreground), 0,04);
raio da borda: 0,4rem;
}

.contador deslizante {
margem: 0 1,2rem;
}

.botões deslizantes {
exibição: flexível;
alinhar itens: centro;
justificar-conteúdo: centro;
}

.botão deslizante {
cor: rgba(var(--cor-foreground), 0,75);
fundo: transparente;
fronteira: nenhuma;
cursor: ponteiro;
largura: 44px;
altura: 44px;
}

.botão deslizante: não ([desativado]): passar o mouse {
cor: rgb(var(--color-foreground));
}

.botão deslizante .icon {
altura: 0,6rem;
}

.botão deslizante[desativado] .icon {
cor: rgba(var(--color-foreground), 0,3);
}

.botão deslizante--próximo .icon {
margem direita: -0,2rem;
transformar: girar (-90 graus) traduzirX (0,15rem);
}

.botão deslizante--anterior .icon {
margem esquerda: -0,2rem;
transformar: girar (90 graus) traduzirX (-0,15rem);
}

.botão deslizante--próximo:não([desativado]):hover .icon {
transformar: girar (-90 graus) traduzirX (0,15rem) escala (1,07);
}

.botão deslizante--prev:not([desativado]):hover .icon {
transformar: girar (90 graus) traduzirX (-0,15rem) escala (1,07);
}

/* botão de vídeo quando a imagem é do tipo vídeo */
.video-btn {
largura: 100%;
altura: 100%;
posição: relativa;
}

.v-btn {
topo: 2% !importante;
esquerda: 2% !importante;
}

.hide-modal abridor modal {
Mostrar nenhum;
}

.ativo-thumb {
opacidade: 1 !importante;
borda: sólido 2px var(--gradient-base-accent-1);
dimensionamento de caixa: caixa de borda;
}

.slide-imagem {
opacidade: 0,5;

}

if (this.productSlider) {this.currentPage = Math.round (this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 4} else {
this.currentPage = Math.round(this.slider.scrollLeft / this.sliderLastItem.clientWidth) + 1;
}