Controle deslizante de imagem do produto para o tema Shopify Dawn

{ %- líquido atribuir produtos_to_display = seção. configurações . coleção . contagem_de_produtos_todos
 se seção. configurações . coleção . all_products_count > seção. configurações . contagem_produtos 
atribuir produtos_to_display = seção. configurações . contagem_produtos
 fim se
 -% }
 { % atribuir slideNum = seção. configurações . número_do slide % }

 < div class = "carouselContainer" id = "seção-- {{section.id}} " > 
< div class = "topWrapper" > 
{ % se seção. configurações . título ! = em branco % } < h2 > { { seção. configurações . título } } < / h2 > { % endif % } 
{ % se seção. configurações . view_all == true e seção. configurações . tipo == 'produto' % }
 <a href = "{{section.settings.collection.url }}" id = "viewAllBtn" > _ {{ section.settings.collection.url }} _ _ _ 
< span > Ver tudo < / span >
 < / a >
 { % fim se % }
 < / div >
 < carrossel - componente
 dados -type = " {{section.settings.type}} " 
dados - reprodução automática = " {{section.settings.autoplay}} "
 dados - intervalo = " {{section.settings.interval | times: 1000 }} "
 dados - infinito - scroll = " {{section.settings.infinite}} "
 dados - contador - type = " {{section.settings.counter_type}} " > 
< div class = "carouselWrapper" >
 < ul class = "carouselBox" >
 { % seção de caso . configurações . tipo % }
 { % quando "produto" % } 
{ %- para produto na seção. configurações . coleção . limite de produtos : seção. configurações . contagem_produtos -% }
 < li class = "carouselSlider" id = "slide- {% increment %} " > 
{ % atribuir imagem_produto = produto. selecionado_ou_primeira_variável_disponível % }
 < a class = "productBox" href = " {{ product.url | within: collection }} " style = "text-decoration: none;" >
 < div class = "carouselImage" > 
< img src = " {{ product.featured_image | img_url: 'master'}} "
 alt = " {{ product.images.alt | escape }} " / >
 < / div >
 < div class = "detailsText" > 
< span class = "produtoTitle" > { { produto. título } } < / span > 
< span class = "produtoPrice" > { { produto. preço | dinheiro } } < / span >
 < / div >
 < / a >
 < / li > 
{ % fim para % }


 { % quando "cartão" % }
 { % se seção. configurações . número_do_slide > 5 % } 
{ % atribuir seção. configurações . número_slide = 4 % }
 { % outro % }
 { % atribuir slide_number = seção. configurações . número_do slide % }
 { % fim se % } 
{ % para bloco na seção. blocos % }
 < li class = "carouselSlider"
 id = "slide- {% increment %} " > 
< a class = "cardWrapper" { % if bloco. configurações . link_do_cartão ! = em branco % } href = " {{block.settings.card_link}} " { % endif % } > 
{ % atribuir img_url = bloco. configurações . imagem_cartão % }
 { % se img_url ! = em branco % }
 < div class = "cardImageWrapper" > 
< div class = "cardImage" >
 < img src = " {{img_url | img_url: master}} "
 srcset = " {% case img_url.width %}
 {% when >= 375 %} {{ img_url | img_url: '375x' }} 375w,
 {% when >= 750 %} {{ img_url | img_url: '750x' }} 750w,
 {% when >= 1100 %} {{ img_url | img_url: '1100x' }} 1100w, 
{% when >= 1500 %} {{ img_url | img_url: '1500x' }} 1500w,
 {% when >= 1780 %} {{ img_url | img_url: '1780x' }} 1780w,
 {% when >= 2000 %} {{ img_url | img_url: '2000x' }} 2000w,
 {% when >= 3000 %} {{ img_url | img_url: '3000x' }} 3000w,
 {% when >= 3840 %} {{ img_url | img_url: '3840x' }} 3840w,
 {% else %} {{ img_url | img_url: 'master' }} w,
 {% endcase %} "
 carregando = "preguiçoso" 
alt = " {{ img_url.alt | escape }} " >
 < / div >
 < / div >
 { % fim se % } 
{ % se bloco. configurações . descrição_cartão ! = em branco ou bloco. configurações . título ! = em branco % }
 < div class = "cartãoDescrição" > 
{ % se bloco. configurações . título ! = blank % } < h2 class = "cardTitle" > { { bloco. configurações . título } } < / h2 > { % endif % } 
{ { bloquear. configurações . descrição_cartão } }
 < / div >
 { % fim se % }
 < / a >
 < / li >
 { % fim para % } 
{ % final % }
 < / ul >
 < / div >
 < div class = "controlContainer" >
 < div class = "btnContainer" > 
< tipo de botão = "botão" class = "controlWrapper" id = "prevSlide" >
 < span class = "controlBtn prevBtn" >< / span >
 < / botão > 
< ul class = "slideDotContainer {% if section.settings.counter_type == 'dots' %} numberDot {% endif %} " >
 { % seção de caso . configurações . tipo_contador % }
 { % quando 'pontos' % } 
{ % se seção. configurações . tipo == 'cartão' % }
 { % para bloco na seção. blocos % } 
< li class = "slideDots {% if forloop.first %} activeDot {% endif %} " data - dot - id = " {{forloop.index0}} " >< / li >
 { % fim para % } 
< span class = "activeNumber" > 1 < / span >< span > / < / span > < span > { % se seção. configurações . tipo == 'produto' % } { { produtos_para_display } } { % endif % } 
{ % se seção. configurações . tipo == 'cartão' % } { { seção. blocos . tamanho } } { % endif % } < / span > 
{ % fim se % }

 { % se seção. configurações . tipo == 'produto' % } 
{ % para produto na seção. configurações . coleção . limite de produtos : seção. configurações . contagem_produtos % } 
< li class = "slideDots {% if forloop.first %} activeDot {% endif %} " data - dot - id = " {{forloop.index0}} " >< / li >
 { % fim para % }
 
< span class = "activeNumber" > 1 < / span > < span > / < / span > < span > { % se seção. configurações . tipo == 'produto' % } { { produtos_para_display } } { % endif % } 
{ % se seção. configurações . tipo == 'cartão' % } { { seção. blocos . tamanho } } { % endif % } < / span > 
{ % fim se % }

 { % quando 'número' % } 
< span class = "activeNumber" > 1 < / span > / < span > { % if seção. configurações . tipo == 'produto' % } { { produtos_para_display } } { % endif % } 
{ % se seção. configurações . tipo == 'cartão' % } { { seção. blocos . tamanho } } { % endif % } < / span > 
{ % final % }

 < / ul >
 < tipo de botão = "botão" class = "controlWrapper" id = "nextSlide" >
 < span class = "controlBtn nextBtn" >< / span > 
< / botão >
 < / div >
 { % se seção. configurações . reprodução automática == verdadeiro % } 
< tipo de botão = "botão" class = "pauseContainer" id = "autoplaySlide" >
 < span class = "pauseBtn" >< / span > 
< span class = "playBtn" > < / span >
 < / botão >
 { % fim se % }
 < / div >
 < / carrossel - componente > 
< / div >

 <estilo> _
 #seção-- {{section.id}} {
 --texto -cor : { { seção. configurações . cor do texto } } ; 
--card -bg -color : { { seção. configurações . card_bg_color } } ;
 -- botão - cor : { { seção. configurações . cor do botao } } ; 
--botão -bg -color : { { seção. configurações . button_bg_color } } ;
 --box - size : calc ( 100 % / { { slideNum } } ) ;
 }
 
carrossel - componente {
 largura : 100 % ;
 }

 . carrosselContainer {
 posição : relativa ;
 exibição : flexível ;
 flex - direction : coluna ;
 justificar - itens : centro ;
 alinhar - itens : centro ; 
margem : 50px ;
 }

 . topoWrapper {
 exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 largura : 100 % ;
 alinhar - itens : centro ;
 margem inferior : 1rem ;
 }
 
. topWrapper h2 {
 margem : automática ;
 }

 . carrosselWrapper {
 largura : 100 % ;
 altura : 100 % ;
 posição : relativa ;
 exibição : flexível ;
 flex - direction : coluna ; 
justificar - conteúdo : espaço entre ;
 alinhar - itens : esticar ;
 }

 . carrosselBox {
 largura : 100 % ;
 preenchimento : 3,5 % 0 ;
 exibição : flexível ; 
alinhar - itens : flex - start ;
 margem : 0 ;
 flex - wrap : herdar ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ; 
- webkit - overflow - rolagem : toque ;
 -ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ;
 }

 . carouselBox :: - webkit - barra de rolagem {
 Mostrar nenhum ;
 }
 
. carrosselSlider {
 largura mínima : var ( -tamanho da caixa ) ;
 largura : 100 % ;
 exibição : flexível ;
 flex - direction : coluna ;
 justificar - conteúdo : centro ; 
preenchimento - direita : 2 % ;
 transição : tudo facilita 0,5s ;
 }
 /*===== PRODUTO ==== */
 . produtoCaixa {
 plano de fundo : var ( -bg - color ) ;
 exibição : flexível ;
 decoração de texto : nenhuma ; 
altura : 100 % ;
 flex - direction : coluna ;
 justificar - conteúdo : espaço entre ;
 }

 . productBox : pairar {
 plano de fundo : var ( -box - bg - color ) ; 
transformar : escala ( 1,05 ) ;
 }

 . carrosselImagem {
 largura : 100 % ;
 altura : 100 % ;
 ajuste ao objeto : capa ;
 posição do objeto : centro centro ;
 }
 
. carrosselImagem > img {
 largura : 100 % ;
 }

 . detalhesTexto {
 exibição : flexível ;
 flex - direction : coluna ;
 alinhar - itens : flex - start ;
 altura da linha : 1,2 ; 
tamanho da fonte : braçadeira ( 10px, 1,5vw,18px ) ;
 cor : var ( -text - color ) ;
 altura : 100 % ;
 largura : 100 % ;
 espaço em branco : normal ;
 estouro : oculto ; 
preenchimento : 5 % ;
 }

 . preço do produto {
 preenchimento - topo : 1 % ;
 tamanho da fonte : braçadeira ( 10px, 2vw, 18px ) ;
 peso da fonte : 600 ;
 margem superior : 10px ; 
}

 . númeroDot > span {
 Mostrar nenhum ;
 }

 /* === NÚMERO DE SLIDES === */
 @media screen e ( largura máxima : 750px ) {
 . carrosselSlider {
 altura : 100 % ; 
largura mínima : 33,5 % ! importante ;
 }

 . slideDots {
 Mostrar nenhum ! importante ;
 }
 . númeroDot > span {
 exibição : bloquear ! importante ;
 }

 } 
@media screen e ( largura máxima : 481px ) {
 . carrosselContainer {
 margem : 4 % ;
 }
 . carrosselBox {
 preenchimento : 1,5 % 0 ;
 }
 . carrosselSlider { 
preenchimento - esquerda : 4 % ;
 largura mínima : 50 % ! importante ;
 }
 . detalhesTexto {
 tamanho da fonte : 2,5vw ;
 }
 . controlContainer : pairar { 
transformar : escala ( 1,05 ) ;
 }
 #viewAllBtn {
 altura da linha : 1,2 ;
 }
 }

 /*===== CARTÃO ==== */
 . cardWrapper {
 largura : 100 % ; 
altura : 100 % ;
 posição : relativa ;
 preenchimento : 5 % ;
 cor de fundo : var ( -card - bg - color ) ;
 estouro : oculto ;
 } 
. cardWrapper : passe o mouse. cartãoImagem {
 transformar : escala ( 1,05 ) ;
 }
 . cardWrapper : passe o mouse. cardImageWrapper {
 estouro : visível ;
 transformar : escala ( 1,05 ) ;
 }
 
. cardImageWrapper {
 posição : relativa ;
 largura : 100 % ;
 estouro : oculto ;
 linha da grade : 1/2 ;
 transição : tudo facilita 0,5s ;
 }
 . cartãoImagem { 
largura : 100 % ;
 altura : 100 % ;
 transição : tudo facilita 0,5s ;
 estouro : oculto ;
 }

 . cardImage > img {
 largura : 100 % ;
 proporção de aspecto : 1 ; 
ajuste ao objeto : capa ;
 posição do objeto : centro centro ;
 alinhamento vertical : meio ;
 }

 . título do cartão {
 largura : 100 % ;
 margem : 5 % 0 ;
 alinhamento de texto : centro ; 
peso da fonte : 600 ;
 tamanho da fonte : braçadeira ( 9px, 1,5vw, 19px ) ;
 altura da linha : 1,2 ;
 linha da grade : 2/3 ; 
cor : var ( -text - color ) ;
 }

 . descrição do cartão {
 largura : 100 % ;
 altura da linha : 1,2 ;
 linha da grade : 3/4 ; 
preenchimento : 5px ;
 }

 . cartãoDescrição p {
 tamanho da fonte : braçadeira ( 8px, 1,2vw, 18px ) ;
 margem : 0 ;
 estouro de texto : reticências ;
 cor : var ( -text - color ) ; 
alinhamento de texto : centro ;
 }

 /* ====== CONTROLES ===== */
 . controlContainer {
 exibição : flexível ;
 justificar - conteúdo : centro ;
 transição : tudo facilita 0,5s ;
 }

 . botão controlContainer {
 cor de fundo : transparente ;
 }
 
. botão controlContainer > span {
 cor de fundo : var ( -cor do botão ) ;
 }

 . controlContainer : pairar {
 transformar : escala ( 1,05 ) ;
 }
 . btnContainer { 
altura : 30px ;
 exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 alinhar - itens : centro ;
 cor : var ( -cor do botão ) ;
 preenchimento : 0,5 % ;
 }
 . controlWrapper { 
largura : 50px ;
 altura : herdar ;
 posição : relativa ;
 exibição : flexível ;
 alinhar - itens : centro ;
 cursor : ponteiro ;
 justificar - conteúdo : espaço uniformemente ;
 borda : nenhuma ;
 transição : facilidade de transformação 0,5s ;
 } 
. controlBtn {
 display : bloco embutido ;
 largura : 25px ;
 altura : 15px ;
 cor de fundo : var ( -cor do botão ) ;
 borda : nenhuma ;
 transição : facilidade de transformação 0,5s ;
 }
 
. controlWrapper : pairar. controlBtn {
 transformar : escala ( 1,05 ) ;
 }

 . controlWrapper : pairar {
 transformar : escala ( 1,05 ) ;
 }

 #nextSlide: desativado .controlBtn {
 fundo - cor : #c3c5b8; 
}
 . próximoBtn { 
-webkit - clip - path : polígono ( 15 % 0 , 65 % 50 % , 15 % 100 % , 0 85 % , 35 % 50 % , 0 15 % ) ; 
clip - path : polígono ( 15 % 0 , 65 % 50 % , 15 % 100 % , 0 85 % , 35 % 50 % , 0 15 % ) ; 
margem - direita : -10px ;
 }
 #prevSlide: desativado .controlBtn {
 fundo - cor : #c3c5b8;
 }
 . anteriorBtn { 
-webkit - clip - path : polígono ( 100 % 15 % , 65 % 50 % , 100 % 85 % , 85 % 100 % , 35 % 50 % , 85 % 0 ) ; 
clip - path : polígono ( 100 % 15 % , 65 % 50 % , 100 % 85 % , 85 % 100 % , 35 % 50 % , 85 % 0 ) ; 
margem - esquerda : -10px ;
 }
 . pauseContainer {
 posição : relativa ;
 largura : 30px ;
 altura : 30px ;
 margem - esquerda : 1rem ;
 exibição : flexível ;
 justificar - conteúdo : centro ; 
alinhar - itens : centro ;
 borda : nenhuma ;
 }
 . pausaBtn {
 largura : 50 % ;
 altura : 50 % ;
 posição : absoluta ; 
cor de fundo : var ( -cor do botão ) ; 
-webkit - clip - path : polígono ( 0 % 0 % , 0 % 100 % , 40 % 100 % , 40 % 0 , 60 % 0 , 60 % 99 % , 100 % 100 % , 100 % 0 % ) ; 
clip - path : polígono ( 0 % 0 % , 0 % 100 % , 40 % 100 % , 40 % 0 , 60 % 0 , 60 % 99 % , 100 % 100 % , 100 % 0 % ) ; 
}
 . jogarBtn {
 largura : 50 % ;
 altura : 60 % ;
 Mostrar nenhum ;
 posição : absoluta ;
 cor de fundo : var ( -cor do botão ) ; 
-webkit - clip - path : polígono ( 0 0 , 0 100 % , 100 % 49 % ) ; 
clip - path : polígono ( 0 0 , 0 100 % , 100 % 49 % ) ;
 }
 . playBtn : pairar {
 transformar : escala ( 1,05 ) ; 
cor de fundo : var ( -cor do botão ) ;
 }
 . pauseBtn : pairar {
 transformar : escala ( 1,05 ) ;
 cor de fundo : var ( -cor do botão ) ;
 }
 
/*=== CONTROLE DE PONTO ====*/
 . slideDotContainer {
 posição : relativa ;
 largura : 100 % ;
 altura : herdar ;
 margem : 0,5rem ;
 exibição : flexível ;
 preenchimento : 0 ; 
justificar - conteúdo : espaço ao redor ;
 alinhar - itens : centro ;
 flex - wrap : herdar ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ; 
- webkit - overflow - rolagem : toque ;
 -ms - overflow - style : nenhum ; /* IE e Edge */
 largura da barra de rolagem : nenhuma ;
 }
 . slideDots : pairar {
 transformar : escala ( 1,05 ) ; 
}
 . slideDots {
 posição : relativa ;
 cor de fundo : transparente ;
 borda : 2px var sólido ( -cor do botão ) ;
 largura : 10px ;
 altura : 10px ;
 raio da borda : 50 % ; 
margem : 0 1px ;
 tipo de estilo de lista : nenhum ;
 }
 . ponto ativo {
 cor de fundo : var ( -botão - bg - color ) ;
 }

 /*=== VER TODOS OS CONTROLES ====*/
 #viewAllBtn { 
display : bloco embutido ;
 raio da borda : 5px ;
 preenchimento : 5px 10px ;
 cor branca ;
 peso da fonte : 600 ;
 caixa - sombra : 2px 2px 2px preto ; 
cor de fundo : var ( -cor do botão ) ;
 decoração de texto : nenhuma ;
 alinhamento de texto : centro ;
 }
 #viewAllBtn:hover::depois {
 conteúdo : "Produtos" ;
 }

 #viewAllBtn:ativo{
 box - shadow : nenhum ; 
transformar : traduzirY ( -2 % ) ;
 }

 < / estilo >
 { % esquema % }
 {
 "nome" : "Carrossel Universal" ,
 "configurações" : [
 { 
"tipo" : "texto" ,
 "id" : "título" ,
 "label" : "nome do carrossel"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "tipo" ,
 "padrão" : "produto" ,
 "rótulo" : "tipo de item" , 
"opções" : [
 {
 "valor" : "produto" ,
 "rótulo" : "produto"
 } ,
 {
 "valor" : "cartão" ,
 "etiqueta" : "cartão"
 }
 ]
 } ,
 { 
"tipo" : "coleção" ,
 "id" : "coleção" ,
 "rótulo" : "Coleção"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "reprodução automática" ,
 "padrão" : falso ,
 "label" : "Reprodução automática" 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "visualizar_todos" ,
 "padrão" : falso ,
 "label" : "Mostrar botão visualizar tudo (disponível apenas no tipo de produto)"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "infinito" , 
"padrão" : falso ,
 "label" : "Rolagem infinita"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "intervalo" ,
 "rótulo" : "intervalo" ,
 "máximo" : 15 ,
 "min" : 1 , 
"passo 1 ,
 "unidades " ,
 "padrão" : 3
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "número_slide" ,
 "min" : 3 ,
 "máximo" : 7 , 
"label" : "Número de slides a serem exibidos (somente desktop)" ,
 "padrão" : 4
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "contagem_produtos" ,
 "min" : 4 ,
 "máximo" : 100 ,
 "label" : "Número de produtos a serem exibidos" , 
"padrão" : 4
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "counter_type" ,
 "padrão" : "número" ,
 "label" : "tipo de contador" ,
 "opções" : [
 {
 "valor" : "pontos" , 
"rótulo" : "pontos"
 } ,
 {
 "valor" : "número" ,
 "rótulo" : "número"
 }
 ]
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Cor da seção"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "text_color" ,
 "label" : "Cor do texto" ,
 "padrão" : "#232b2b"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "card_bg_color" ,
 "label" : "Cor de fundo do cartão" , 
"padrão" : "#232b2b"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "cor_botão" ,
 "label" : "Cor do botão" ,
 "padrão" : "#232b2b"
 } ,
 {
 "tipo" : "cor" , 
"id" : "button_bg_color" ,
 "label" : "Cor de fundo do botão" ,
 "padrão" : "#232b2b"
 }
 ] ,
 "blocos" : [
 {
 "tipo" : "cartão" ,
 "nome" : "cartão" , 
"configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem_cartão" ,
 "label" : "imagem do cartão"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "rótulo" : "título" 
} ,
 {
 "type" : "richtext" ,
 "id" : "descrição_cartão" ,
 "rótulo" : "descrição" ,
 "default" : "<p>Escreva sua descrição aqui</p>"
 } ,
 {
 "tipo" : "url" ,
 "id" : "card_link" , 
"label" : "link do cartão"
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Carrossel Universal"
 }
 ]
 }
 { % termina o esquema % }

classe CarouselComponent estende HTMLElement {
 construtor ( ) {
 super ( ) ;

 esse . slideBox = isto . querySelector ( '.carouselBox' ) ; 
esse . slides = isto . querySelectorAll ( '.carouselSlider' ) ;
 esse . slideLot = isto . querySelector ( '.activeNumber' ) ;
 
esse . prevBtn = isto . querySelector ( "#prevSlide" ) ;
 esse . próximoBtn = isto . querySelector ( "#nextSlide" ) ; 
esse . pausePlay = isto . querySelector ( ".pauseContainer" ) ;
 esse . slideDots = isto . querySelectorAll ( '.slideDots' ) ;
 
esse . contador = isto . conjunto de dados . counterType ;
 esse . intervalo = isto . conjunto de dados . intervalo ;
 esse . infinito = isto . conjunto de dados . Rolagem infinita ; 
esse . reprodução automática = isto . conjunto de dados . Reprodução automática ;

 if ( ! this.slideDots ) retornar ; _ 
esse . slideDots . forEach ( ponto => ponto. addEventListener ( 'clique' , este . showDot . bind ( este ) ) )) ;
 esse . tempo esgotado ; 
esse . curSlide = 0 ;

 if ( isto . reprodução automática == 'verdadeiro' ) {
 esse . autoPlayFx ( ) ;
 esse . infinito = 'verdadeiro' ; 
} outro {
 clearInterval ( this.autoplaying ) ;
 esse . infinito = 'falso' ;
 }

 esse . iniciar ( ) 
const resizeObserver = new ResizeObserver ( entradas => this .init ( ) ) ;
 redimensionarObserver. observe ( este.slideBox ) ; _
 
esse . anteriorBtn . addEventListener ( " clique" , isto.prevFx.bind ( isto ) ) ; 
esse . próximoBtn . addEventListener ( " clique" , isto.nextFx.bind ( este ) ) ;
 if ( ! this.pausePlay ) retornar ; _ 
esse . pausaReproduzir . addEventListener ( " clique" , isto.pauseFx.bind ( isto ) ) ;
 }

 iniciar ( ) { 
if ( este . contador == 'número' ) {
 esse . slideLot . HTML interno = 1 ;
 }
 esse . goToSlide ( 0 ) ;
 }

 autoPlayFx ( ) { 
clearInterval ( this.autoplaying ) ;
 esse . autoplaying = setInterval ( este.nextFx.bind ( isto ) , este.intervalo ) ; _
 }

 pausaFx ( ) { 
esse . pausaBtn = isto . pausaReproduzir . querySelector ( '.pauseBtn' ) ;
 esse . playBtn = isto . pausaReproduzir . querySelector ( '.playBtn' ) ; 
if ( isto . reprodução automática === 'verdadeiro' ) {
 clearInterval ( this.autoplaying ) ;
 esse . reprodução automática = 'falso' ;
 
esse . jogarBtn . estilo . exibir = "bloco" ;
 esse . pausaBtn . estilo . exibir = "nenhum" ;
 } outro { 
if ( este . curSlide == isto . slides . comprimento - 1 ) {
 esse . curSlide = - 1 ;
 }
 esse . autoPlayFx ( ) ; 
esse . reprodução automática = 'verdadeiro' ;
 esse . jogarBtn . estilo . exibir = "nenhum" ;
 esse . pausaBtn . estilo . exibir = "bloco" ;
 }
 }

 anteriorFx ( ) { 
esse . curSlide -- ;
 if ( este . curSlide < 0 ) {
 if ( isto . infinito == 'verdadeiro' ) { 
esse . curSlide = isto . slides . comprimento - 1 ;
 } outro {
 esse . curSlide = 0 ;
 }
 } 
esse . goToSlide ( this.curSlide ) ; _
 esse . activeSlide ( this.curSlide ) ; _
 }

 próximoFx ( ) {
 esse . curSlide ++ 
if ( este . curSlide == isto . slides . comprimento ) {
 if ( isto . infinito == 'verdadeiro' ) {
 esse . curSlide = 0 ;
 } 
if ( isto . reprodução automática == 'verdadeiro' ) {
 esse . curSlide = 0 ;
 }
 }
 esse . goToSlide ( this.curSlide ) ; _ 
esse . activeSlide ( this.curSlide ) ; _
 }

 mostrarDot ( e ) {
 if ( ! e. currentTarget ) return ;
 const ponto atual = e. atualTarget . conjunto de dados . pontoId ;
 
esse . activeSlide ( atualDot ) ;
 }

 goToSlide ( slide ) {
 deixe leftScroll = slide * this . slides [ 0 ] . largura do cliente ; 
esse . slideBox . scrollTo ( { esquerda : esquerdaScroll } ) ;
 }

 activeSlide ( pontoAtual ) { 
esse . slideDots . forEach ( ponto => ponto. classList.remove ( ' activeDot' ) ) ;

 if ( isto . infinito == 'falso' ) { 
if ( pontoatual == isto.slides.comprimento - 1 ) { _
 esse . próximoBtn . setAttribute ( 'desativado' , verdadeiro ) ;
 } outro { 
esse . próximoBtn . removeAttribute ( 'desabilitado' ) ;
 }
 if ( pontoatual == 0 ) {
 esse . anteriorBtn . setAttribute ( 'desativado' , verdadeiro ) ; 
} outro {
 esse . anteriorBtn . removeAttribute ( 'desabilitado' ) ;
 }
 }

 esse . slideLot . innerHTML = pontoAtual + 1 ; 
if ( ! this.slideDots [ currentDot ] ) return ;
 esse . slideDots [ pontoAtual ] . lista de classes . adicionar ( 'ativoDot' ) ; 
esse . showDot ( atualDot ) ;

 esse . curSlide = pontoAtual ;
 esse . goToSlide ( pontoAtual ) ;
 }
 }

 elementos personalizados. define ( 'componente-carrossel' , CarouselComponent ) ;