Banner avançado da galeria do Shopify com controle deslizante em sua página

 { % atribuir slider_size = seção. blocos | tamanho % }
 <estilo> _
 . avanço - controle deslizante - contêiner { 
posição : relativa ;
 largura : 100 %;
 altura : 90vh ;
 exibição : flexível ;
 alinhar - itens : centro ;
 histórico : #ececec;
 estouro : oculto ;
 }
 . avanço - controle deslizante - plano de fundo - imagem { 
posição : absoluta ;
 largura : 100 %;
 altura : automático ;
 topo : 0 ;
 esquerda : 0 ;
 Mostrar nenhum ;
 }
 . avançar - controle deslizante -- controle deslizante - imagem { 
largura : 100 %;
 altura : 100 %;
 }
 . avanço - controle deslizante - fundo - imagem img ,
 . avanço - controle deslizante - controle deslizante - imagem img {
 largura : 100 %;
 altura : 100 %; 
ajuste ao objeto : capa ;
 posição do objeto : centro ;
 exibição : bloco ;
 }
 . avanço - controle deslizante - controle deslizante - imagem img {
 plano de fundo : #c0c0c0;
 } 
. avanço - controle deslizante - plano de fundo - imagem. ativo - imagem {
 exibição : bloco ;
 }
 . avanço - controle deslizante - texto - contêiner {
 posição : relativa ;
 largura : 100 %;
 altura : 100 %; 
}
 . avançar - controle deslizante -- texto - wrapper {
 posição : absoluta ;
 altura : 100 %;
 largura : 100 %;
 topo : 0 ;
 esquerda : 0 ;
 Mostrar nenhum ; 
flex - direction : coluna ;
 flex - direction : coluna ;
 justificar - conteúdo : centro ;
 alinhar - itens : flex - start ;
 preenchimento : 5rem 5rem 5rem 3rem ;
 } 
. avanço - controle deslizante - texto - wrapper div > * {
 cor : #fff;
 }
 . avanço - controle deslizante - texto - wrapper. ativo - texto {
 exibição : flexível ;
 } 
. avanço - controle deslizante - título ,
 . avanço - controle deslizante - conteúdo ,
 . avançar - controle deslizante - botão {
 estouro : oculto ;
 altura : automático ;
 largura : 100 %;
 posição : relativa ; 
transição : opacidade 1s facilidade , margem 1s facilidade , escala 0,5s facilidade ;
 }
 divisão . avançar - controle deslizante - botão {
 altura : 5vh ;
 margem - esquerda : - 1,5rem ;
 } 
divisão . avançar - controle deslizante - botão a : pairar {
 escala : 1,1 ;
 }
 divisão . avançar - controle deslizante - botão a {
 posição : absoluta ;
 margem - esquerda : 1,5rem ;
 } 
. avanço - controle deslizante - texto - contêiner. slide - anterior . avançar - controle deslizante - botão > a {
 animação : botão de subir 2s facilita entrada e saída para frente ;
 } 
. avanço - controle deslizante - texto - contêiner. slide - próximo . avançar - controle deslizante - botão > a {
 animação : botão de descida 2s facilita entrada e saída para frente ;
 }
 @keyframes subir - botão { 
0 % {
 opacidade : 0 ;
 margem - superior : - 100 %;
 }
 100 % {
 opacidade : 1 ;
 margem - superior : 0 %;
 }
 } 
@keyframes botão de descer {
 0 % {
 opacidade : 0 ;
 margem - superior : 100 %;
 }
 100 % {
 opacidade : 1 ;
 margem - superior : 0 %; 
}
 }
 . avanço - controle deslizante - título h2 ,
 . avanço - controle deslizante - conteúdo p ,
 . avançar - controle deslizante - botão > a {
 largura : 100 %;
 opacidade : 0 ; 
transição : opacidade 1s facilidade , margem 1s facilidade , escala 0,5s facilidade ;
 }
 . avanço - controle deslizante - texto - contêiner. slide - anterior . avançar - controle deslizante -- título > h2 {
 animação : subida 1s 0,3s facilidade entrada - saída para frente ;
 } 
. avanço - controle deslizante - texto - contêiner. slide - anterior . avançar - controle deslizante - conteúdo > p {
 animação : subida 1s facilita entrada e saída para frente ;
 } 
. avanço - controle deslizante - texto - contêiner. slide - próximo . avançar - controle deslizante -- título > h2 {
 animação : descida 1s 0,3s facilidade entrada - saída para frente ;
 } 
. avanço - controle deslizante - texto - contêiner. slide - próximo . avançar - controle deslizante - conteúdo > p {
 animação : descida 1s facilidade entrada- saída para frente ;
 }
 forte. avanço - controle deslizante - controle deslizante - título { 
espaço em branco : normal ;
 altura da linha : 1 ;
 margem inferior : 0,5rem ;
 tamanho da fonte : clamp ( 10px , 1,3vw , 15px ) ;
 }
 período. avanço - controle deslizante - controle deslizante - legenda { 
altura da linha : 1 ;
 tamanho da fonte : clamp ( 10px , 1,3vw , 15px ) ;
 }
 @keyframes aumentam {
 0 % {
 opacidade : 0 ; 
transformar : traduzirY ( -100 % ) ;
 }
 100 % {
 opacidade : 1 ;
 transformar : traduzirY ( 0 % ) ;
 }
 }
 @keyframes desce { 
0 % {
 opacidade : 0 ;
 transformar : traduzirY ( 100 % ) ;
 }
 100 % {
 opacidade : 1 ; 
transformar : traduzirY ( 0 % ) ;
 }
 }
 . avanço - controle deslizante - texto - wrapper a {
 largura : conteúdo máximo ;
 altura : conteúdo máximo ;
 preenchimento : 0,5rem 1rem ;
 fundo : vermelho ; 
decoração de texto : nenhuma ;
 cor : #ffff;
 }
 . avanço - controle deslizante -- filho {
 posição : relativa ;
 largura : 50 %;
 altura : 75 %;
 exibição : flexível ;
 flex - direction : coluna ; 
estouro : oculto ;
 }
 . avanço - controle deslizante -- filho ul {
 posição : relativa ;
 exibição : flexível ;
 altura : 100 %;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ; 
scroll - preenchimento - esquerda : 1,5rem ;
 - webkit - overflow - rolagem : toque ;
 margem : 0 ;
 preenchimento : 0 ;
 alinhar - itens : centro ;
 justificar - conteúdo : flex - start ; 
transição : transforma 0,4s de facilidade de entrada e saída ;
 }
 . avanço - controle deslizante - filho ul. transição - fim {
 transição : nenhuma ;
 }
 . avançar - controle deslizante -- filho li {
 posição : relativa ; 
flex - encolher : 0 ;
 largura : 25 %;
 altura : 80 %;
 exibição : flexível ;
 preenchimento : 0 1rem 1rem ;
 transição : todos os 0,3s diminuem ;
 } 
. avanço - controle deslizante - filho li. ativo - slide {
 altura : 100 %;
 }
 . avanço - controle deslizante - controle deslizante - imagem img {
 raio da borda : 0,5rem ;
 } 
. avançar - controle deslizante - botão - contêiner {
 preenchimento : 1rem ;
 }
 . avanço - controle deslizante - filho - contêiner {
 posição : relativa ;
 exibição : flexível ;
 justificar - conteúdo : centro ; 
alinhar - itens : centro ;
 largura : 100 %;
 altura : 60vh ;
 margem : automática ;
 }
 . avanço - controle deslizante - indicador - texto - contêiner {
 altura : 100 %;
 largura : 50 %; 
exibição : flexível ;
 margem : 0rem 0 0 10rem ;
 }
 . avanço - controle deslizante - indicador - wrapper {
 exibição : flexível ;
 flex - direction : coluna ;
 altura : 100 %; 
justificar - conteúdo : espaço entre ;
 posição : relativa ;
 alinhar - itens : centro ;
 }
 . avanço - controle deslizante - indicador - wrapper : antes de {
 contente : "" ;
 posição : absoluta ; 
topo : 0 ;
 esquerda : 50 %;
 traduzir : - 50 % 0 ;
 altura : 100 %;
 largura : 2px ;
 background : var ( -indicador - background ) ; 
índice z : 0 ;
 }
 . avanço - controle deslizante - indicador - extensão do wrapper. indicador {
 posição : relativa ;
 largura : 10px ;
 altura : automático ;
 proporção de aspecto : 1 ; 
background : var ( -indicador - background ) ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 borda - raio : 50 %; 
cor : var ( -cor do indicador ) ;
 cursor : ponteiro ;
 }
 período. indicador :: antes de {
 contente : "" ;
 posição : absoluta ; 
transformar : traduzir ( -50 % , -50 % ) ;
 superior : 50 %;
 esquerda : 50 %;
 largura : 30px ;
 altura : 30px ;
 cursor : ponteiro ;
 exibição : bloco ; 
índice z : 1 ;
 borda - raio : 50 %;
 }
 período. indicador : pairar ,
 . avanço - controle deslizante - botão - botão contêiner : pairar {
 escala : 1,2 ;
 } 
. avançar - controle deslizante - botão - botão contêiner [ nome = "próximo" ] {
 margem - esquerda : 1rem ;
 }
 . avanço - controle deslizante - indicador - extensão do wrapper. ativo - índice {
 largura : 30px ; 
altura : automático ;
 proporção de aspecto : 1 ;
 background : var ( -indicador - background ) ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ; 
borda - raio : 50 %;
 cor : var ( -cor do indicador ) ;
 índice z : 0 ;
 } 
. advance - slider --indicador - wrapper . indicador . ativo - índice > . indicador - índice {
 exibição : bloco ;
 }
 . avanço - controle deslizante - controle deslizante - texto - contêiner {
 posição : absoluta ; 
inferior : 10px ;
 altura : conteúdo máximo ;
 preenchimento : 1rem ;
 exibição : flexível ;
 largura : calc ( 100 % -2rem ) ;
 cor : #fff;
 flex - direction : coluna ;
 } 
. avançar - controle deslizante - botão - botão contêiner {
 largura : braçadeira ( 30px , 1,5vw , 50px ) ;
 altura : automático ;
 proporção de aspecto : 1 ;
 borda - raio : 50 %;
 borda : nenhuma ; 
exibição : inline - flex ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 }
 . avanço - controle deslizante - botão - botão contêiner : foco - visível {
 contorno : não definido ;
 box - shadow : não definido ; 
}
 . avanço - controle deslizante - indicador - contêiner. móvel - indicador ,
 . advance - slider --indicador - wrapper . indicador - índice {
 Mostrar nenhum ;
 }
 . avanço - controle deslizante - conteúdo p { 
cor : herdar ;
 }
 Tela @media somente e ( largura máxima : 1300px ) {
 . avançar - controle deslizante -- filho li {
 altura : 50 %;
 }
 . avanço - controle deslizante - filho li. ativo - slide { 
altura : 65 %;
 }
 }
 Tela @media somente e ( largura máxima : 950px ) {
 . avançar - controle deslizante -- filho li {
 altura : 80 %;
 } 
. avanço - controle deslizante - filho li. ativo - slide {
 altura : 100 %;
 }
 . avanço - controle deslizante - filho - contêiner {
 flex - direction : coluna ;
 altura : 100 %;
 } 
. avanço - controle deslizante - filho - contêiner > * {
 largura : 100 %;
 margem : 0 ;
 }
 . avanço - controle deslizante -- filho {
 largura : 90 %;
 } 
. avanço - controle deslizante -- filho ul {
 altura : 100 %;
 }
 . avanço - controle deslizante - indicador - contêiner. área de trabalho - indicador ,
 . avanço - controle deslizante - controle deslizante - texto - contêiner { 
Mostrar nenhum ;
 }
 . avanço - controle deslizante - indicador - contêiner. celular - indicador {
 exibição : bloco ;
 largura : 80 %;
 margem : automática ;
 }
 . avanço - controle deslizante - conteúdo p { 
margem : 0 ;
 }
 . avançar - controle deslizante -- texto - wrapper {
 preenchimento : 3rem 2rem ;
 justificar - conteúdo : espaço uniformemente ;
 }
 . avanço - controle deslizante - imagem de fundo , 
. avanço - controle deslizante - contêiner {
 altura : 85vh ;
 }
 . avanço - controle deslizante -- filho {
 altura : 65 %;
 preenchimento : 1rem 0 ;
 }
 . avançar - controle deslizante - botão - contêiner { 
posição : absoluta ;
 exibição : flexível ;
 largura : 100 %;
 altura : 100 %;
 alinhar - itens : centro ;
 índice z : 999 ;
 preenchimento : 0 ; 
justificar - conteúdo : espaço entre ;
 }
 . avanço - controle deslizante - indicador - contêiner. celular - indicador
 . avanço - controle deslizante - indicador - wrapper {
 exibição : flexível ;
 flex - direction : linha ;
 } 
. avanço - controle deslizante - indicador - contêiner. indicador móvel . indicador {
 background : var ( -indicador - background ) ;
 cor : var ( -cor do indicador ) ;
 } 
. avanço - controle deslizante - indicador - wrapper {
 largura : 100 %;
 }
 . avanço - controle deslizante - indicador - wrapper : antes de {
 Mostrar nenhum ;
 }
 }
 </ estilo > 
< avançar - dados do controle deslizante - slider - size = " {{ slider_size }} " >
 < div
 class = "advance-slider--container"
 style = "margem superior: {{ section.settings.padding_top | append: " px " }} ; margem inferior: {{ section.settings.padding_bottom | append: " px " }} ;"
 > 
{ % para bloco na seção. blocos % }
 < div
 class = "advance-slider--background-image {% if forloop.first %} imagem ativa {% endif %} "
 dados - background = " {{ forloop.index0 }} "
 > 
{ % se bloco. configurações . imagem_de_fundo ! = em branco % }
 { {
 bloquear. configurações . imagem de fundo
 | URL_da_imagem : largura : 1500
 | imagem_tag : 
largura : bloco. configurações . imagem de fundo . largura ,
 altura : bloco. configurações . imagem de fundo . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , 
alt : bloquear. configurações . imagem de fundo . alternativo
 | escapar
 } }
 { % fim se % }
 </div> _ _
 { % fim para % } 
< div class = "advance-slider--child-container" >
 < div class = "advance-slider--indicator-text-container" >
 < div class = "advance-slider--indicator-container desktop-indicator" >
 < div 
class = "advance-slider--indicator-wrapper"
 style = "--indicator-background: {{ section.settings.indicator_bg }} ; --indicator-color: {{ section.settings.indicator_text }} "
 >
 { % para bloco na seção. blocos % }
 < intervalo 
class = "indicador {% if forloop.first %} índice ativo {% endif %} "
 dados - indicador = " {{ forloop.index0 }} "
 >
 < span class = "índice do indicador" >
 { { forloop. índice } } 
</span> _
 </span> _
 { % fim para % }
 </div> _ _
 </div> _ _
 < div class = "advance-slider--text-container slide-next" > 
{ % para bloco na seção. blocos % }
 < div
 class = "advance-slider--text-wrapper {% if forloop.first %} texto ativo {% endif %} "
 dados -text = " {{ forloop.index0 }} "
 > 
< div class = "advance-slider--title" >
 < h2 style = "color: {{ block.settings.heading_color }} " > { { block. configurações . título } } </ h2 >
 </div> _ _ 
< div class = "advance-slider--content" style = "color: {{ block.settings.content_color }} " >
 { { bloquear. configurações . Conteúdo do Texto } }
 </div> _ _ 
{ % se bloco. configurações . button_label != em branco % }
 < div class = "avance-slider--button" >
 < um
 href = " {{ block.settings.button_link }} " 
estilo = "fundo: {{ block.settings.button_bg }} ; cor: {{ block.settings.button_color }} ;"
 >
 { { bloquear. configurações . rótulo_de_botão } }
 </a> _
 </div> _ _
 { % fim se % } 
</div> _ _
 { % fim para % }
 </div> _ _
 </div> _ _
 < div class = "advance-slider--child" > 
< ul style = "transformar: traduzirX(-75%)" >
 { % para bloco na seção. blocos % }
 { % se forloop. primeiro % } 
{ % atribuir segundo_loop = slider_size | menos : 2 % }
 { % atribuir terceiro_loop = slider_size | menos : 3 % } 
{ % atribuir quarto_loop = slider_size | menos : 4 % }
 { % atribuir last_block = seção. blocos [ last_loop ] . configurações % } 
{ % atribuir segundo_ao_último = seção. blocos [ segundo_loop ] . configurações % }
 { % atribuir terceiro_ao_último = seção. blocos [ terceiro_loop ] . configurações % } 
{ % atribuir quarto_ao_último = seção. blocos [ quarto_loop ] . configurações % }
 < li class = "advance-slider--child-wrapper" data - slide - index = " {{ fourth_loop | plus: 1 }} " > 
< div class = "advance-slider--slider-image" >
 { % se quarto_até_último. slider_image ! = em branco % }
 { {
 quarto_até_último. imagem_slider
 | URL_da_imagem : largura : 1500 
| imagem_tag :
 largura : quarto_ao_último. imagem_deslizante . largura ,
 altura : quarto_ao_último. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , 
alt : quarto_ao_último. imagem_deslizante . alternativo
 | escapar
 } }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - quarto_até_último. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - quarto_até_último. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 < li class = "advance-slider--child-wrapper" data - slide - index = " {{ third_loop | plus: 1 }} " >
 < div class = "advance-slider--slider-image" > 
{ % se do terceiro ao último. slider_image ! = em branco % }
 { {
 terceiro_ao_último. imagem_slider
 | URL_da_imagem : largura : 1500
 | imagem_tag : 
largura : terceiro_ao_último. imagem_deslizante . largura ,
 altura : terceiro ao último. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : terceiro_ao_último. imagem_deslizante . alternativo 
| escapar
 } }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - do terceiro ao último. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - do terceiro ao último. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 < li class = "advance-slider--child-wrapper" data - slide - index = " {{ second_loop | plus: 1 }} " >
 < div class = "advance-slider--slider-image" > 
{ % se segundo_até_último. slider_image ! = em branco % }
 { {
 penúltimo lugar. imagem_slider
 | URL_da_imagem : largura : 1500
 | imagem_tag : 
largura : segundo_até_último. imagem_deslizante . largura ,
 altura : segundo_até_último. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : segundo_até_último. imagem_deslizante . alternativo 
| escapar
 } }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - penúltimo lugar. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - penúltimo lugar. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 { % fim se % }
 < li
 class = "advance-slider--child-wrapper {% if forloop.first %} slide ativo {% endif %} "
 dados - slide - índice = " {{ forloop.index0 }} "
 > 
< div class = "advance-slider--slider-image" >
 { % se bloco. configurações . slider_image ! = em branco % }
 { {
 bloquear. configurações . imagem_slider 
| URL_da_imagem : largura : 1500
 | imagem_tag :
 largura : bloco. configurações . imagem_deslizante . largura ,
 altura : bloco. configurações . imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' , 
larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : bloquear. configurações . imagem_deslizante . alternativo
 | escapar
 } }
 { % fim se % }
 </div> _ _ 
< div class = "advance-slider--slider-text-container" >
 < strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " > 
{ { - bloquear. configurações . card_heading - } }
 </forte> _
 < span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " > 
{ { - bloquear. configurações . card_subtext - } }
 </span> _
 </div> _ _
 </ li >
 { % se forloop. durar % } 
{ % atribuir primeiro_loop = 0 % }
 { % atribuir segundo_loop = 1 % }
 { % atribuir terceiro_loop = 2 % } 
{ % atribuir quarto_loop = 3 % }
 { % atribuir primeiro_item = seção. blocos [ primeiro_loop ] . configurações % } 
{ % atribuir segundo_item = seção. blocos [ segundo_loop ] . configurações % }
 { % atribuir terceiro_item = seção. blocos [ terceiro_loop ] . configurações % } 
{ % atribuir quarto_item = seção. blocos [ quarto_loop ] . configurações % }
 < li class = "advance-slider--child-wrapper" data - slide - index = " {{ first_loop }} " > 
< div class = "advance-slider--slider-image" >
 { % se primeiro_item. slider_image ! = em branco % }
 { {
 primeiro_item. imagem_slider
 | URL_da_imagem : largura : 1500 
| imagem_tag :
 largura : primeiro_item. imagem_deslizante . largura ,
 altura : primeiro_item. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , 
alt : primeiro_item. imagem_deslizante . alternativo
 | escapar
 } }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - primeiro_item. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - primeiro_item. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 < li class = "advance-slider--child-wrapper" data - slide - index = " {{ second_loop }} " >
 < div class = "advance-slider--slider-image" > 
{ % se segundo_item. slider_image ! = em branco % }
 { {
 segundo_item. imagem_slider
 | URL_da_imagem : largura : 1500
 | imagem_tag : 
largura : segundo_item. imagem_deslizante . largura ,
 altura : segundo_item. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : segundo_item. imagem_deslizante . alternativo 
| escapar
 } }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - segundo_item. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - segundo_item. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 < li class = "advance-slider--child-wrapper" data - slide - index = " {{ third_loop }} " >
 < div class = "advance-slider--slider-image" > 
{ % se terceiro_item. slider_image ! = em branco % }
 { {
 terceiro_item. imagem_slider
 | URL_da_imagem : largura : 1500
 | imagem_tag : 
largura : terceiro_item. imagem_deslizante . largura ,
 altura : terceiro_item. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : terceiro_item. imagem_deslizante . alternativo
 | escapar 
} }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - terceiro_item. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - terceiro_item. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 < li class = "advance-slider--child-wrapper" dados - slide - index = " {{ fourth_loop }} " >
 < div class = "advance-slider--slider-image" > 
{ % se quarto_item. slider_image ! = em branco % }
 { {
 quarto_item. imagem_slider
 | URL_da_imagem : largura : 1500
 | imagem_tag : 
largura : quarto_item. imagem_deslizante . largura ,
 altura : quarto_item. imagem_deslizante . altura ,
 tamanhos : '(largura mínima: 750px) 50vw, 100vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : quarto_item. imagem_deslizante . alternativo 
| escapar
 } }
 { % fim se % }
 </div> _ _
 < div class = "advance-slider--slider-text-container" > 
< strong class = "advance-slider--slider-title" style = "color: {{ block.settings.card_heading_color }} " >
 { { - quarto_item. card_heading - } }
 </forte> _ 
< span class = "advance-slider--slider-subtitle" style = "color: {{ block.settings.card_subtext_color }} " >
 { { - quarto_item. card_subtext - } }
 </span> _
 </div> _ _ 
</ li >
 { % fim se % }
 { % fim para % }
 </ul> _
 < div class = "advance-slider--button-container" > 
< nome do botão = "anterior" estilo = "plano de fundo: {{ section.settings.button_bg }} " >
 < svg
 viewBox = "0 0 14 10"
 preencher = "nenhum"
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação" 
xmlns = "http://www.w3.org/2000/svg"
 style = "largura: clamp(30px, 1,5vw, 50px); girar: 180deg;"
 >
 < preenchimento de caminho - regra = "evenodd"
 clipe - regra = "evenodd"
 d = "M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354 um 0,5,5 0 01-0,109-0,546z" 
fill = " {{ section.settings.button_color }} " >
 </svg> _
 </ botão >
 < nome do botão = "próximo" estilo = "plano de fundo: {{ section.settings.button_bg }} " >
 < svg
 viewBox = "0 0 14 10"
 preencher = "nenhum" 
aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 xmlns = "http://www.w3.org/2000/svg"
 style = "largura: braçadeira (30px, 1,5vw, 50px)"
 >
 < caminho
 preencher - regra = "evenodd"
 clipe - regra = "evenodd" 
d = "M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11.793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354 um 0,5,5 0 01-0,109-0,546z"
 fill = " {{ section.settings.button_color }} " >
 </svg> _
 </ botão >
 </div> _ _ 
< div class = "advance-slider--indicator-container mobile-indicator" >
 < div class = "advance-slider--indicator-wrapper" >
 { % para bloco na seção. blocos % }
 < intervalo 
class = "indicador {% if forloop.first %} índice ativo {% endif %} "
 dados - indicador = " {{ forloop.index0 }} "
 >
 < span class = "índice do indicador" >
 { { forloop. índice } } 
</span> _
 </span> _
 { % fim para % }
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _
 </div> _ _ 
</ avanço - controle deslizante >
 { % esquema % }
 {
 "name" : "Controle deslizante avançado" ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações do indicador lateral" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "indicador_bg" ,
 "label" : "Fundo do indicador" ,
 "padrão" : "#000" ,
 "info" : "Ao passar o mouse, a cor será invertida" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "texto_indicador" ,
 "label" : "Cor do texto do indicador" ,
 "default" : "#fff" ,
 "info" : "Ao passar o mouse, a cor será invertida" 
} ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações do botão"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "botão_bg" , 
"label" : "Fundo do botão" ,
 "padrão" : "#000" ,
 "info" : "Ao passar o mouse, a cor será invertida"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "cor_botão" , 
"label" : "Cor do botão" ,
 "default" : "#fff" ,
 "info" : "Ao passar o mouse, a cor será invertida"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" , 
"min" : 0 ,
 "máximo" : 100 ,
 "unidade" : "px" ,
 " passo 1 ,
 "padrão" : 0 ,
 "label" : "Preenchimento superior" 
} ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 ,
 "unidade" : "px" , 
" passo 1 ,
 "padrão" : 0 ,
 "label" : "Preenchimento inferior"
 }
 ] ,
 "blocos" : [
 {
 "nome" : "Controle deslizante" , 
"tipo" : "controle deslizante" ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações do controle deslizante"
 } ,
 {
 "type" : "image_picker" , 
"id" : "imagem_slider" ,
 "label" : "Imagem do controle deslizante"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "card_heading" ,
 "label" : "Texto do cabeçalho do cartão" , 
"info" : "Limite de 15 letras"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "card_heading_color" ,
 "label" : "Cor do texto do cabeçalho do cartão" ,
 "padrão" : "#fff" 
} ,
 {
 "tipo" : "texto" ,
 "id" : "cartão_subtexto" ,
 "label" : "Subtexto do cartão"
 } ,
 {
 "tipo" : "cor" , 
"id" : "card_subtext_color" ,
 "label" : "Cor do texto do subtexto do cartão" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações de texto e plano de fundo" 
} ,
 {
 "type" : "image_picker" ,
 "id" : "imagem_de_fundo" ,
 "label" : "Imagem_de_fundo"
 } ,
 {
 "tipo" : "texto" , 
"id" : "título" ,
 "label" : "Texto do título"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "heading_color" ,
 "label" : "Cor do texto do título" , 
"padrão" : "#fff"
 } ,
 {
 "type" : "richtext" ,
 "id" : "content_text" ,
 "label" : "Texto do conteúdo"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "content_color" ,
 "label" : "Cor do texto do conteúdo" ,
 "padrão" : "#fff"
 } ,
 {
 "tipo" : "texto" , 
"id" : "button_label" ,
 "label" : "Etiqueta do botão"
 } ,
 {
 "tipo" : "url" ,
 "id" : "botão_link" ,
 "label" : "Link do botão" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "botão_bg" ,
 "label" : "Cor de fundo do botão" ,
 "padrão" : "#000"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "cor_botão" ,
 "label" : "Cor do texto do botão" ,
 "padrão" : "#fff"
 }
 ]
 }
 ] ,
 "predefinições" : [ 
{
 "name" : "Controle deslizante avançado"
 }
 ]
 }
 { % termina o esquema % }

 classe AdvanceSlider estende HTMLElement {
 construtor ( ) { 
super ( ) ;
 esse . t = isso . querySelector ( "ul" ) ;
 esse . eu = isso . querySelectorAll ( ".advance-slider--child-wrapper" ) ; 
esse . botões = isto . querySelectorAll ( "botão" ) ;
 esse . índice = 3 ;
 esse . h ;
 esse . eu ; 
const t = novo ResizeObserver ( ( t ) => this . o ( ) ) ;
 t. observe ( este.t ) ; _ 
esse . botões . forEach ( ( t ) => t.addEventListener ( "clique" , isto.v.ligar ( este ) ) ) ) ; 
esse . querySelectorAll ( “.indicador” ) . forEach ( ( t ) =>
 t. addEventListener ( " clique " , isto.u.ligar ( este ) )
 ) ; 
janela. addEventListener ( "keydown" , this . v . bind ( this ) ) ; 
esse . t . addEventListener ( " touchstart " , este.p.ligar ( este ) ) ; 
esse . t . addEventListener ( " touchend " , este.p.ligar ( este ) ) ;
 }
 m ( ) { 
const t = isto . t . getBoundingClientRect ( ) ;
 retornar (
 t. superior >= 0 &&
 t. inferior <= ( window. innerHeight || document. documentElement . clientHeight ) 
) ;
 }
 p ( t ) {
 t. digite == "touchstart"
 ? ( this . h = t. changeTouches [ 0 ] . clientX ) 
: ( this.l = t.changedTouches [ 0 ] .clientX ) ; _
 if ( t. type == "touchend" ) this . v ( t ) ; 
}
 v ( t ) {
 t. preventDefault ( ) ;
 deixe eu ;
 vamos ;
 se ( este . m ( ) ) {
 eu = t. códigochave == "39" ; 
s = t. códigochave == "37" ;
 }
 if ( t. type == "touchend" ) { 
se ( isto . h - isto . l > 0 ) {
 eu = verdadeiro ;
 } outro {
 s = verdadeiro ;
 }
 } 
if ( t. currentTarget . nome === "próximo" || i ) {
 if ( este . índice < este . i . comprimento - 4 ) { 
esse . índice = isto . índice + 1 ;
 } outro {
 esse . índice = 4 ;
 } 
esse . querySelector ( ".advance-slider--text-container" ) . lista de classes . adicionar (
 "slide-próximo"
 ) ;
 esse . querySelector ( ".advance-slider--text-container" ) . lista de classes . remover (
 "slide anterior" 
) ;
 } else if ( t. currentTarget . name === "anterior" || s ) {
 if ( este . índice > 4 ) { 
esse . índice = isto . índice - 1 ;
 } outro {
 esse . índice = isto . eu . comprimento - 4 ;
 } 
esse . querySelector ( ".advance-slider--text-container" ) . lista de classes . remover (
 "slide-próximo"
 ) ;
 esse . querySelector ( ".advance-slider--text-container" ) . lista de classes . adicionar (
 "slide anterior" 
) ;
 }
 esse . o ( ) ;
 }
 o ( ) {
 const t = isto . eu [ 0 ] . largura do cliente ; 
deixe i = `$ { - t * isto . índice } px` ; 
if ( este . índice > 4 || este . índice < este . i . comprimento - 4 ) { 
esse . t . lista de classes . remover ( "fim da transição" ) ;
 eu = `$ { - isto . eu [ 0 ] . clientWidth * this . índice } px` ; 
if ( este . índice == 4 || este . índice == isto . i . comprimento - 4 ) { 
esse . t . lista de classes . add ( "fim da transição" ) ;
 }
 } outro {
 esse . t . lista de classes . add ( "fim da transição" ) ; 
i = `$ { - t * ( this . i . length - this . index ) } px` ;
 } 
esse . eu . forEach ( ( t ) => t.classList.remove ( "active-slide " ) ) ; 
esse . eu [ isso . índice ] . lista de classes . add ( "slide ativo" ) ;
 esse . t . estilo . transformar = `traduzirX ( $ { i } ) ` ; 
consts = isto . querySelector ( ".advance-slider--child-wrapper.active-slide" )
 . conjunto de dados .$ ;
 esse . g ( s ) ;
 esse . k ( s ) ;
 } 
g ( t ) {
 esse . querySelectorAll ( ".advance-slider--text-wrapper" ) . forEach ( ( t ) =>
 t. lista de classes . remover ( "texto ativo" )
 ) ; 
esse . querySelector ( ` [ data - text = "${t}" ] ` ) . lista de classes . add ( "texto ativo" ) ; 
esse . querySelectorAll ( ".advance-slider--background-image" ) . forEach ( ( t ) =>
 t. lista de classes . remover ( "imagem ativa" )
 ) ; 
esse . querySelector ( ` [ data - background = "${t}" ] ` ) . lista de classes . adicionar (
 "imagem ativa"
 ) ;
 }
 k ( t ) { 
esse . querySelectorAll ( ".indicador" ) . forEach ( ( t ) =>
 t. lista de classes . remover ( "índice ativo" )
 ) ; 
esse . querySelectorAll ( ` [ dados - indicador = "${t}" ] ` ) . forEach ( ( t ) => {
 t. lista de classes . add ( "índice ativo" ) ;
 } ) ; 
}
 você ( t ) {
 seja eu = t. atualTarget . conjunto de dados . eu * 1 ;
 esse . k ( eu ) ;
 esse . índice = eu + 3 ; 
if ( este . índice == 3 || este . índice == isto . i . comprimento - 3 ) { 
esse . t . lista de classes . add ( "fim da transição" ) ;
 } outro {
 esse . t . lista de classes . remover ( "fim da transição" ) ;
 } 
esse . o ( este.índice ) ; _
 }
 }
 elementos personalizados. define ( "avance-slider" , AdvanceSlider ) ;