Controle deslizante de imagem do produto da coleção em destaque para o tema Shopify Dawn com opção

{ { 'component-cartão.css' | URL_do_asset | folha_de_estilo } }
 { { 'preço-componente.css' | URL_do_asset | folha_de_estilo } } 
{ { 'componente-produto-grid.css' | URL_do_asset | folha_de_estilo } }
 { { 'featured-slider.css' | URL_do_asset | folha_de_estilo } }
 
< link rel = "folha de estilo" href = " {{ 'component-slider.css' | asset_url }} " media = "print" onload = "this.media='all'" > 
< link rel = "stylesheet" href = " {{ 'template-collection.css' | asset_url }} " media = "print" onload = "this.media='all'" > 
< noscript > { { 'template-collection.css' | URL_do_asset | folha de estilo_tag } } < / noscript >

 { %- líquido
 atribuir produtos_to_display = seção. configurações . coleção . contagem_de_produtos_todos
 atribuir swipe_on_mobile = true
 
se seção. configurações . coleção . all_products_count > seção. configurações . produtos_para_exibir
 atribuir produtos_to_display = seção. configurações . produtos_para_exibir
 atribuir more_in_collection = true
 fim se
 -% }
 
< div class = "collectionSlider" style = "padding-top: {{ section.settings.padding_top | append: " & " }} ; padding-bottom: {{section.settings.padding_bottom | append: " & " }} " > 
< div class = "featured-title-wrapper {% if section.settings.title == blank %} title-wrapper-with-link--no-heading {% endif %} " >
 { % se seção. configurações . título ! = em branco % } 
< h2 class = "título em destaque" > { { seção. configurações . título | escapar } } < / h2 >
 { % fim se % } 
{ % se seção. configurações . mostrar_view_all % } 
<a href = "{{section.settings.collection.url }}" class = "button" > { {{ section.settings.collection.url }} ' sections.featured_collection.view_all ' | _ _ _ _ t } } < / a >
 { % fim se % } 
< / div >

 < coleção - controle deslizante - estilo do componente = "--border-color: {{section.settings.border_color}} ;" > 
{ % se seção. configurações . slider_visual == 'slider' % } < div class = "sliderCounterBox" >
 < tipo de botão = "botão" class = "sliderCounterButton sliderCounterButton--botão deslizante anterior" 
dados - etapa = "1"
 nome = "anterior"
 aria - label = " {{ 'sections.slideshow.previous_slideshow' | t }} "
 estilo "display: flex" 
aria -controls = "Slider- {{ section.id }} " > { % render 'icon-caret' % } < / button >
 { % fim se % }
 < ul id = "Slider- {{ section.id }} "
 class = "grade em destaque 
grade de produtos
 {% if section.settings.collection.all_products_count > 2 and swipe_on_mobile and section.settings.products_to_show > 2 %}
 controle deslizante controle deslizante - grade do tablet - espiar {% endif %}
 {% if section.settings.show_view_all and section.settings.collection.products.size > section.settings.products_to_show %}
 margem negativa--small {% endif %} " role = "list" > 
{ %- para produto na seção. configurações . coleção . limite de produtos : seção. configurações . produtos_para_mostrar -% }
 < li id ​​= "Slide- {{ section.id }} - {{ forloop.index }} "
 dados - imagem = " {{forloop.index0}} " 
class = "grid--col {% if section.settings.collection.all_products_count > 2 and swipe_on_mobile and section.settings.products_to_show > 2 %} slider__slide {% endif %} " >
 { % se seção. configurações . versão mais recente % }
 { % renderiza 'produto-cartão' ,
 card_produto : produto, 
media_aspect_ratio : seção. configurações . proporção_da_imagem ,
 show_secondary_image : seção. configurações . mostrar_imagem_secundária ,
 show_vendor : seção. configurações . mostrar_fornecedor ,
 show_rating : seção. configurações . mostrar_rating
 % }
 { % outro % } 
{ % renderizar 'cartão de produto' ,
 produto_cartão_produto : produto,
 media_size : seção. configurações . proporção_da_imagem ,
 show_secondary_image : seção. configurações . mostrar_imagem_secundária ,
 add_image_padding : seção. configurações . add_image_padding ,
 show_vendor : seção. configurações . mostrar_fornecedor ,
 show_image_outline : seção. configurações . mostrar_imagem_outline , 
show_rating : seção. configurações . mostrar_rating
 % }
 { % fim se % }
 < / li >
 { %- outro -% } 
{ %- para i em ( 1 .. 4 ) -% }
 < li class = "grid__item" >
 { % render 'cartão-produto' , show_vendor : seção. configurações . mostrar_vendor % } 
< / li >
 { %- fim para -% }
 { %- fim para -% }
 < / ul >
 { % se seção. configurações . slider_visual == 'controle deslizante' % } 
< tipo de botão = "botão" class = "sliderCounterButton sliderCounterButton--próximo botão deslizante {% if section.settings.slider_visual != 'slider' %} oculto {% endif %} "
 nome = "próximo"
 dados - etapa = "1"
 estilo = "exibição:flex"
 aria - label = " {{ 'sections.slideshow.next_slideshow' | t }} " 
aria -controls = "Slider- {{ section.id }} " > { % render 'icon-caret' % }
 < / botão >
 < / div >
 { % fim se % } 
{ % -se seção. configurações . coleção . all_products_count > 2 e swipe_on_mobile e seção. configurações . produtos_para_exibir > 2 -% }
 
{ % -se seção. configurações . slider_visual == 'controle deslizante' -% }
 < div class = "sliderContainer" > 
< input type = "range" min = "0" max = " {{products_to_display | minus: 1}} " value = "1" class = "sliderCounter" id = "myRange" >
 < / div >
 <estilo> _ 
. coleçãoSlider . sliderCounter :: - webkit - slider - polegar {
 largura : calc ( 100 % / { { produtos_para_display } }} ) ;
 }
 
. coleçãoSlider . sliderCounter :: -moz -range -polegar {
 largura : calc ( 100 % / { { produtos_para_display } }} ) ;
 }
 < / estilo > 
{ % fim se % }

 < div class = "slideshow__controls slider-buttons no-js-hidden {% if section.settings.slider_visual == 'slider' %} oculto {% endif %} "
 estilo = "display:flex" >
 < tipo de botão = "botão" class = "botão deslizante botão deslizante--anterior" 
dados - etapa = "1"
 nome = "anterior"
 aria - label = " {{ 'sections.slideshow.previous_slideshow' | t }} "
 aria -controls = "Slider- {{ section.id }} " > { % render 'icon-caret' % } < / button > 
< div class = "slider-counter slider-counter-- {{ section.settings.slider_visual }} {% if section.settings.slider_visual == 'numbers' %} caption {% endif %} " >
 < div class = "contador--móvel" > 
< span class = "slider-counter--current" > 1 < / span >
 < span aria - oculto = "true" > / < / span >
 < span class = "slider-counter--total" > 
{ % se seção. configurações . produtos_para_mostrar < seção. configurações . coleção . produtos % }
 { { seção. configurações . produtos_para_exibir } }
 { % outro % } 
{ { seção. configurações . coleção . contagem_de_produtos_todos } }
 { % fim se % }
 < / intervalo >
 < / div > 
< div class = "slideshow__control-wrapper slider" >
 { %- para produto na seção. configurações . coleção . limite de produtos : seção. configurações . produtos_para_mostrar -% } 
< botão class = "slider-counter__link slider-counter__link-- {{ section.settings.slider_visual }} link"
 dados - ponto = " {{forloop.index0}} "
 estilo = "preenchimento: 1rem; largura: 100%"
 aria - label = " {{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} 
{{ forloop.length}} "aria -controls = "Slider- {{ section.id }} " > 
{ % -se seção. configurações . slider_visual == 'números' -% } { { forloop. índice } } { % else % } < span class = "ponto" >< / span > { %- endif -% } 
< / botão >
 { %- fim para -% }
 < / div >
 < / div >
 < tipo de botão = "botão" class = "botão deslizante botão deslizante--próximo"
 nome = "próximo" 
dados - etapa = "1"
 aria - label = " {{ 'sections.slideshow.next_slideshow' | t }} "
 aria -controls = "Slider- {{ section.id }} " > { % render 'icon-caret' % }
 < / botão > 
< / div >

 <noscript> _
 < div class = "botões deslizantes" style = "display: flex" >
 < div class = "contador deslizante" > 
{ %- para produto na seção. configurações . coleção . limite de produtos : seção. configurações . produtos_para_mostrar -% }
 < a href = "#Slide- {{ section.id }} - {{ forloop.index }} "
 dados - ponto = " {{forloop.index}} " 
class = "slider-counter__link link" aria - label = " {{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length}} " >
 { { forloop. índice } }
 < / a > 
{ %- fim para -% }
 < / div >
 < / div >
 < / noscript >
 { %- fim se -% }
 < / coleção - controle deslizante - componente > 
< / div >

 { % esquema % }
 {
 "name" : "Controle deslizante de coleção" ,
 "tag" : "seção" ,
 "class" : "seção espaçada" ,
 "configurações" : [
 { 
"tipo" : "caixa de seleção" ,
 "id" : "versão_nova" ,
 "padrão" : verdadeiro ,
 "label" : "Dawn versão 2.6 e superior"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "default" : "Coleção em destaque" , 
"label" : "t:sections.featured-collection.settings.title.label"
 } ,
 {
 "tipo" : "coleção" ,
 "id" : "coleção" ,
 "label" : "t:sections.featured-collection.settings.collection.label"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "produtos_para_exibir" ,
 "min" : 2 ,
 "máximo" : 99 ,
 "passo 1 ,
 "padrão" : 4 ,
 "label" : "t:sections.featured-collection.settings.products_to_show.label"
 } ,
 {
 "tipo" : "caixa de seleção" , 
"id" : "show_view_all" ,
 "padrão" : verdadeiro ,
 "label" : "t:sections.featured-collection.settings.show_view_all.label"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Preenchimento adicional da seção"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 99 ,
 "passo 1 ,
 "unidade" : "%" ,
 "padrão" : 0 ,
 "label" : "Preenchimento da seção superior"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 99 ,
 "passo 1 ,
 "unidade" : "%" ,
 "padrão" : 0 ,
 "label" : "Preenchimento da seção inferior" 
} ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "t:sections.featured-collection.settings.header.content"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "image_ratio" ,
 "opções" : [
 {
 "valor" : "adaptar" , 
"label" : "t:sections.featured-collection.settings.image_ratio.options__1.label"
 } ,
 {
 "valor" : "retrato" ,
 "label" : "t:sections.featured-collection.settings.image_ratio.options__2.label"
 } ,
 {
 "valor" : "quadrado" ,
 "label" : "t:sections.featured-collection.settings.image_ratio.options__3.label"
 } 
] ,
 "padrão" : "adaptar" ,
 "label" : "t:sections.featured-collection.settings.image_ratio.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_secondary_image" ,
 "padrão" : falso ,
 "label" : "mostrar imagem secundária"
 } , 
{
 "tipo" : "caixa de seleção" ,
 "id" : "add_image_padding" ,
 "padrão" : falso ,
 "label" : "adicionar preenchimento de imagem"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_image_outline" , 
"padrão" : verdadeiro ,
 "label" : "mostrar contorno da imagem"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_vendor" ,
 "padrão" : falso ,
 "label" : "mostrar fornecedor"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "show_rating" ,
 "padrão" : falso ,
 "label" : "mostrar avaliação do produto" ,
 "info" : "Para exibir uma classificação, adicione um aplicativo de classificação de produto. Saiba mais"
 } ,
 {
 "tipo" : "cor" , 
"id" : "border_color" ,
 "rótulo" : "cor da borda" ,
 "default" : "#eee"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "slider_visual" ,
 "opções" : [
 {
 "valor" : "pontos" , 
"rótulo" : "pontos"
 } ,
 {
 "valor" : "números" ,
 "rótulo" : "números"
 } ,
 {
 "valor" : "controle deslizante" ,
 "rótulo" : "controle deslizante"
 }
 ] ,
 "padrão" : "números" , 
"rótulo" : "números"
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Controle deslizante da coleção"
 }
 ]
 }
 { % termina o esquema % }

. coleçãoSlider { 
preenchimento : 5 % ;
 estouro : oculto ;
 }

 . controle deslizante CollectionSlider - componente {
 posição : relativa ;
 exibição : bloco ;
 }

 @media screen e ( largura máxima : 989px ) { 
. no - js componente deslizante . controle deslizante {
 preenchimento - inferior : 3rem ;
 }
 }

 . slider__slide {
 scroll - snap - align : start ;
 flex - encolher : 0 ;
 }
 
@media screen e ( largura máxima : 749px ) {
 . grade -- col {
 largura : 33 % ;
 }
 }

 @media screen e ( largura máxima : 481px ) {
 . grade -- col { 
largura : 50 % ;
 }
 }

 @media screen e ( largura mínima : 750px ) {
 . grade -- col {
 largura : 20 % ;
 }
 }
 
. coleçãoSlider . destaque - título - wrapper {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : espaço entre ;
 margem inferior : 2rem ;
 }

 . coleçãoSlider . destaque - título { 
margem : automático 0 ;
 }

 . coleçãoSlider . destaque - grade {
 exibição : flexível ;
 preenchimento : 0 ;
 }

 . coleçãoSlider . destaque - grade li {
 estilo de lista : nenhum ;
 }
 
. coleçãoSlider . controle deslizante . controle deslizante -- tablet {
 posição : relativa ;
 flex - wrap : herdar ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ; 
scroll - preenchimento - esquerda : 1rem ;
 - webkit - overflow - rolagem : toque ;
 margem inferior : 1rem ;
 }

 . coleçãoSlider . slider__slide {
 preenchimento - inferior : 0 ;
 preenchimento : 0 1rem ; 
}

 @media ( prefere - movimento reduzido ) {
 . controle deslizante -- em todos os lugares {
 comportamento de rolagem : automático ;
 }
 }

 . coleçãoSlider . controle deslizante . controle deslizante - em todos os lugares. slider__slide { 
margem - inferior : 0 ;
 preenchimento - inferior : 0 ;
 scroll - snap - align : center ;
 }

 /* Barra de rolagem */

 . coleçãoSlider . controle deslizante { 
scrollbar - color : rgb ( var ( -color - foreground ) ) rgba ( var ( -color - foreground ) , 0,04 ) ;
 -ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ; 
}

 . coleçãoSlider . controle deslizante :: - webkit - barra de rolagem {
 altura : 0,4rem ;
 largura : 0,4rem ;
 Mostrar nenhum ;
 }

 . não - js. controle deslizante {
 -ms - overflow - style : auto ; 
largura da barra de rolagem : auto ;
 }

 . não - js. controle deslizante :: - webkit - barra de rolagem {
 exibição : inicial ;
 }

 . coleçãoSlider . controle deslizante :: - webkit - barra de rolagem - polegar { 
cor de fundo : rgb ( var ( -color - foreground ) ) ;
 raio da borda : 0,4rem ;
 borda : 0 ;
 }
 . coleçãoSlider . controle deslizante :: - webkit - barra de rolagem - faixa { 
plano de fundo : rgba ( var ( -color - foreground ) , 0,04 ) ;
 raio da borda : 0,4rem ;
 }

 . coleçãoSlider . controle deslizante - contador {
 margem : 0 1,2rem ;
 exibição : flexível ; 
largura mínima : 2rem ;
 justificar - conteúdo : centro ;
 }

 @media screen e ( largura máxima : 749px ) {
 . coleçãoSlider . controle deslizante - contador - pontos,
 . coleçãoSlider . controle deslizante - contador - números { 
margem : 0 ;
 }
 }


 @media screen e ( largura máxima : 749px ) {
 . coleçãoSlider . controle deslizante - contador__link {
 preenchimento : 0,7rem ;
 }
 }
 
. coleçãoSlider . slider - counter__link --pontos . ponto {
 largura : 1rem ;
 altura : 1rem ;
 raio da borda : 50 % ; 
borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,5 ) ;
 preenchimento : 0 ;
 exibição : bloco ;
 }
 
. coleçãoSlider . controle deslizante - contador__link - ativo. slider - counter__link --pontos . ponto {
 cor de fundo : rgb ( var ( -color - foreground ) ) ;
 }
 
@media screen e ( cores forçadas : ativas ) {
 . controle deslizante - contador__link - ativo. slider - counter__link --pontos . ponto {
 cor de fundo : CanvasText ;
 }
 }
 
. slider - counter__link --dots : not ( .slider - counter__link --active ) : hover. ponto {
 cor da borda : rgb ( var ( -color - foreground ) ) ;
 }
 
. slider - counter__link --pontos . ponto ,
 . controle deslizante - counter__link -- números {
 transição : transforma 0,2s de facilidade de entrada e saída ;
 }

 . controle deslizante - contador__link - ativo. controle deslizante - counter__link - números, 
. slider - counter__link --dots : not ( .slider - counter__link --active ) : hover. ponto ,
 . slider - counter__link -- números : hover {
 transformar : escala ( 1.1 ) ;
 }
 
. coleçãoSlider . controle deslizante - counter__link -- números {
 cor : rgba ( var ( -color - foreground ) , 0,5 ) ;
 decoração de texto : nenhuma ;
 }
 
. coleçãoSlider . slider - counter__link -- números : hover {
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 
. coleçãoSlider . controle deslizante - contador__link - ativo. controle deslizante - counter__link -- números {
 decoração de texto : sublinhado ;
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 
. coleçãoSlider . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }

 . coleçãoSlider . controle deslizante - botão { 
cor : rgba ( var ( -color - foreground ) , 0,75 ) ;
 fundo : transparente ;
 borda : nenhuma ;
 cursor : ponteiro ;
 largura : 44px ;
 altura : 44px ;
 exibição : flexível ; 
alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }

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

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

 . botão deslizante [ desabilitado ] . ícone { 
cor : rgba ( var ( -color - foreground ) , 0,3 ) ;
 cursor : não permitido ;
 }

 . botão deslizante – próximo . ícone {
 transformar : girar ( -90 graus ) ;
 }
 
. botão deslizante - anterior. ícone {
 transformar : girar ( 90 graus ) ;
 }

 . botão deslizante - próximo : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( -90 graus ) escala ( 1.1 ) ;
 }

 . botão deslizante - anterior : não ( [ desabilitado ] ) : pairar. ícone { 
transformar : girar ( 90 graus ) escala ( 1.1 ) ;
 }
 
. seção espaçada - largura total : último filho em destaque - componente de apresentação de slides : não ( . largura da página ) . apresentação de slides__controls {
 border - bottom : nenhum ;
 }
 
@media screen e ( largura mínima : 750px ) {
 . coleçãoSlider . apresentação de slides__controls {
 posição : relativa ;
 }
 }

 componente de apresentação de slides : não ( .largura da página ) . controle deslizante - botões { 
borda - direita : 0 ;
 borda - esquerda : 0 ;
 }

 . coleçãoSlider . apresentação de slides__control - wrapper {
 exibição : flexível ;
 largura : 28rem ;
 estouro -x : automático ;
 }
 
. imagem -- ativa {
 borda : 5px var sólido ( -border - color ) ;
 }

 . contador -- celular {
 Mostrar nenhum ;
 }

 Tela @media somente e ( largura máxima : 481px ) { 
. coleçãoSlider . contador -- celular {
 exibição : flexível ;
 }
 . coleçãoSlider . apresentação de slides__control - wrapper {
 Mostrar nenhum ;
 }
 }

 . coleçãoSlider . controle deslizante - contador__link {
 exibição : flexível ; 
alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }

 . coleçãoSlider . ponto pequeno {
 largura : 0,4rem ! importante ;
 altura : 0,4rem ! importante ;
 }

 . coleçãoSlider . ponto médio { 
largura : 0,75rem ! importante ;
 altura : 0,75rem ! importante ;
 }


 /* contador do controle deslizante */

 . coleçãoSlider . slidecontainer {
 largura : 100 % ;
 }

 . coleçãoSlider . sliderContador { 
-webkit -aparência : nenhum ;
 largura : 100 % ;
 altura : 5px ;
 raio da borda : 5px ;
 plano de fundo : #d3d3d3;
 esboço : nenhum ;
 opacidade : 0,7 ; 
- webkit - transição : .2s ;
 transição : opacidade .2s ;
 }

 . sliderCounter : pairar {
 opacidade : 1 ;
 }

 . sliderCounter :: - webkit - slider - polegar { 
-webkit -aparência : nenhum ;
 aparência : nenhuma ;
 altura : 5px ;
 raio da borda : 5px ;
 fundo : preto ;
 cursor : ponteiro ;
 }

 . sliderCounter :: -moz -range -polegar { 
altura : 5px ;
 raio da borda : 5px ;
 fundo : preto ;
 cursor : ponteiro ;
 }

 . sliderCounterBox {
 exibição : flexível ;
 alinhar - itens : centro ;
 }

 . sliderCounterButton {
 Mostrar nenhum ; 
posição : absoluta ;
 fundo : preto ! importante ;
 cor branca ! importante ;
 transição : todos os .2s facilitam ;
 índice z : 10 ;
 }

 . coleçãoSlider : passe o mouse. sliderCounterButton -- anterior {
 esquerda : 0 ; 
}

 . coleçãoSlider : passe o mouse. sliderCounterButton -- próximo {
 direita : 0 ;
 }

 . sliderCounterButton -- anterior {
 esquerda : - 50px ;
 }

 . sliderCounterButton -- anterior > svg { 
transformar : girar ( 90 graus ) ;
 }

 . sliderCounterButton -- próximo {
 direita : - 50px ;
 }

 . sliderCounterButton -- próximo > svg {
 transformar : girar ( -90 graus ) ;
 }
 
. sliderCounterButton : pairar {
 transformar : escala ( 1.1 ) ;
 }

 . sliderCounterButton > svg {
 altura : 2rem ! importante ;
 }

 @media screen e ( largura máxima : 750px ) { 
. sliderCounterButton -- anterior {
 esquerda : 0 ;
 }
 . sliderCounterButton -- próximo {
 direita : 0 ;
 }
 }

class CollectionSliderComponent estende HTMLElement {
 construtor ( ) { 
super ( ) ;
 esse . sliderControlWrapper = isto . querySelector ( '.botões deslizantes' ) ;

 esse . controle deslizante = isto . querySelector ( '[id^="Slider-"]' ) ; 
esse . sliderItems = este . querySelectorAll ( '[id^="Slide-"]' ) ;
 esse . sliderCounter = este . querySelector ( '.sliderCounter' ) ; 
esse . currentPageElement = isto . querySelector ( '.slider-counter--current' ) ;
 esse . pageTotalElement = isto . querySelector ( '.slider-counter--total' ) ; 
esse . prevButton = isto . querySelector ( '.slider-button--prev' ) ;
 esse . próximoButton = isto . querySelector ( '.botão deslizante--próximo' ) ;
 
esse . sliderButtonPrev = isto . querySelector ( '.sliderCounterButton--prev' ) ;
 esse . sliderButtonNext = isto . querySelector ( '.sliderCounterButton--próximo' ) ;

 esse . passo = 0 ; 
esse . sliderControlWrapper = isto . querySelector ( '.slideshow__control-wrapper' ) ;

 esse . sliderControlLinksArray = Array. from ( this.sliderControlWrapper.querySelectorAll ( ' . slider -counter__link' ) ) ; 
esse . sliderControlLinksArray . forEach ( link => link. addEventListener ( 'clique' , este . linkToSlide . vincular ( este ) ) )) ; 
esse . botão anterior . addEventListener ( ' clique' , isto.onButtonClick.bind ( isto ) ) ; 
esse . Próximo botão . addEventListener ( ' clique' , isto.onButtonClick.bind ( este ) ) ;

 if ( este . sliderCounter ) { 
esse . sliderButtonPrev . addEventListener ( ' clique' , isto.onButtonClick.bind ( este ) ) ; 
esse . sliderButtonNext . addEventListener ( ' clique' , isto.onButtonClick.bind ( isto ) ) ;
 
esse . sliderContador . addEventListener ( 'alterar' , este . sliderCounterUpdate . bind ( este ) ) ;
 }
 }

 atualizar ( slide ) { 
esse . sliderItems . forEach ( imagem => {
 imagem. lista de classes . remover ( 'imagem--ativa' ) ;
 imagem. removeAttribute ( 'aria-atual' ) ;
 } ) ;
 
esse . currentPageElement . HTML interno = slide + 1 ;
 esse . pageTotalElement . innerHTML = isto . sliderItems . comprimento ; 
esse . sliderItems [ slide ] . lista de classes . add ( 'imagem--ativa' ) ;
 esse . sliderItems [ slide ] . setAttribute ( 'aria-current' , true ) ; 
esse . sliderControlButtons = isto . querySelectorAll ( '.slider-counter__link' ) ;
 esse . sliderControlButtons . forEach ( link => {
 link. lista de classes . remover ( 'slider-counter__link--active' ) ; 
link. removeAttribute ( 'aria-atual' ) ;
 } ) ;

 esse . sliderControlButtons [ slide ] . lista de classes . add ( 'slider-counter__link--active' ) ; 
esse . sliderControlButtons [ slide ] . setAttribute ( 'aria-current' , true ) ;

 esse . slideScrollPosition = slide * this . sliderItems [ 0 ] . largura do cliente ;
 
esse . controle deslizante . scrollTo ( {
 esquerda : isto . slideScrollPosition
 } ) ;

 if ( este . sliderCounter ) {
 esse . sliderContador . valor = slide ;
 }
 
if ( este.querySelector ( ' .dot' ) ) {
 const controlWidth = this . querySelector ( ` [ dados - ponto = '${0}' ] ` ) . largura do cliente ; 
const controlOffset = this . querySelector ( ` [ dados - ponto = '${slide}' ] ` ) . deslocamentoEsquerda ; 
esse . querySelector ( ` [ dados - ponto = '${slide}' ] ` ) . scrollIntoView ( { bloco : "mais próximo" , inline : "centro" } ) ; 
esse . querySelectorAll ( ` .ponto` ) . forEach ( ponto => ponto. classList.remove ( ' mediumDot' ) ) ; 
esse . querySelectorAll ( ` .ponto` ) . forEach ( ponto => ponto. classList.remove ( ' smallDot' ) ) ;

 if ( controlOffset > controlWidth * 10 ) { 
if ( slide > 4 && slide < this . sliderItems . length - 5 ) { 
esse . querySelector ( ` [ dados - ponto = '${slide - 5}' ] > . ponto ` ) . lista de classes . adicionar ( 'pontopequeno' ) ; 
esse . querySelector ( ` [ data - ponto = '${slide - 4}' ] > . ponto ` ) . lista de classes . add ( 'pontomédio' ) ;
 }
 }
 
if ( controlOffset < ( controlWidth * 10 ) + ( controlWidth * ( this . sliderItems . length - 1 ) ) ) { 
if ( slide > 4 && slide < this . sliderItems . length - 5 ) { 
esse . querySelector ( ` [ dados - ponto = '${slide + 4}' ] > . ponto ` ) . lista de classes . add ( 'pontomédio' ) ; 
esse . querySelector ( ` [ dados - ponto = '${slide + 5}' ] > . ponto ` ) . lista de classes . adicionar ( 'pontopequeno' ) ;
 }
 }
 }
 }

 onButtonClick ( evento ) { 
evento. preventDefault ( ) ;
 if ( evento. alvo atual . nome === 'próximo' ) {
 esse . passo ++ ; 
if ( este . passo > este . sliderItems . comprimento - 1 ) {
 esse . passo = 0
 }
 } outro {
 esse . etapa -- ; 
if ( este . passo < 0 ) {
 esse . passo = isto . sliderItems . comprimento - 1
 }
 }
 esse . currentIndex ( este.passo ) ; _ 
}

 linkToSlide ( evento ) {
 const pontoIndex = evento. atualTarget . conjunto de dados . ponto ;
 esse . passo = pontoIndex ;
 esse . currentIndex ( este.passo ) ; _
 }
 
índiceAtual ( índice ) {
 esse . atualização ( índice ) ;
 }

 sliderCounterUpdate ( evento ) {
 evento. preventDefault ( ) ;
 esse . passo = isto . sliderContador . valor ; 
esse . currentIndex ( este.passo ) ; _
 }
 }

 elementos personalizados. define ( 'coleção-slider-component' , CollectionSliderComponent ) ;