Controle deslizante da lista de blogs

{ { 'componente-produto-grid.css' | URL_do_asset | folha_de_estilo } }
 { { 'blog-slider.css' | URL_do_asset | folha_de_estilo } } 
< 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 > 
< div class = "blogSlider" style = "padding-top: {{ section.settings.padding_top | append: " % " }} ; padding-bottom: {{section.settings.padding_bottom | append: " % " }} " > 
< div class = "blogTitleWrapper {% if section.settings.title == blank %} title-wrapper-with-link--no-heading {% endif %} " >
 { % se seção. configurações . título ! = em branco % } 
< h2 class = "blogTitle" > { { seção. configurações . título | escapar } } </ h2 >
 { % fim se % } 
{ % se seção. configurações . mostrar_view_all % }
 < a href = " {{section.settings.blog.handle | prepend: " / blogs / " }} " class = "button" > Ver tudo </ a > 
{ % fim se % }
 </div> _ _
 < universal - controle deslizante - estilo do componente = "--border-color: {{section.settings.border_color}} ;" > 
{ % se seção. configurações . slider_visual == 'controle deslizante' % }
 < div class = "sliderCounterBox" > 
< tipo de botão = "botão" class = "sliderCounterButton sliderCounterBtn--prev botão deslizante {% if section.settings.slider_button_fixed != true%} slider_button_fixed {% endif %} "
 dados - etapa = "1"
 nome = "anterior"
 aria - label = " {{ 'sections.slideshow.previous_slideshow' | t }} "
 estilo = "exibição:flex" 
aria -controls = "Slider- {{ section.id }} " > { % render 'icon-caret' % } </ button >
 { % fim se % }
 < ul class = "controle deslizante da grade de produtos - tablet" role = "lista" > 
{ %- para artigo na seção. configurações . blog . artigos -% }
 { % atribuir block_length = forloop. comprimento % } 
< li class = "collection-list__item grid__item grid--col {% if section.settings.swipe_on_mobile %} slider__slide {% endif %} " { { bloco. shopify_attributes } } >
 { %- renderizar 'cartão de artigo' ,
 artigo : artigo , 
media_aspect_ratio : artigo. imagem . proporção da tela ,
 show_image : seção. configurações . mostrar_imagem ,
 show_date : seção. configurações . data_de_show ,
 mostrar_autor : seção. configurações . mostrar_autor ,
 show_excerpt : verdadeiro
 -% }
 <estilo> _ 
. blogSlider . cartão - invólucro {
 plano de fundo : { { seção. configurações . fundo } } ;
 }
 </ estilo >
 </ li >
 { %- fim para -% }
 </ul> _ 
{ % se seção. configurações . slider_visual == 'controle deslizante' % }
 < tipo de botão = "botão" class = "sliderCounterButton sliderCounterBtn--próximo botão deslizante {% if section.settings.slider_button_fixed != true %} slider_button_fixed {% 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 comprimento_do_bloco > 3 -% }

 { % -se seção. configurações . slider_visual == 'controle deslizante' -% } 
< div class = "sliderContainer" >
 < input type = "range" min = "0" max = " {{block_length | minus: 1 }} " value = "1" class = "sliderCounter" id = "myRange" > 
</div> _ _
 <estilo> _
 . blogSlider . sliderCounter ::- webkit - slider - polegar {
 largura : calc ( 100 % / { { comprimento_do_bloco } } ) ;
 } 
. blogSlider . sliderCounter ::- moz - range - polegar {
 largura : calc ( 100 % / { { comprimento_do_bloco } } ) ;
 }
 </ 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" > 
{ { comprimento_do_bloco } }
 </span> _
 </div> _ _
 < div class = "slideshow__control-wrapper slider" >
 { %- para artigo na seção. configurações . blog . artigos -% } 
< 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 artigo na seção. configurações . blog . artigos -% } 
< 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 -% } 
</ universal - controle deslizante - componente >
 </div> _ _
 { % esquema % }
 {
 "name" : "Controle deslizante da lista de blogs" ,
 "tag" : "seção" ,
 "class" : "seção espaçada" , 
"configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "default" : "Lista de blogs" ,
 "rótulo" : "Título"
 } ,
 { 
"tipo" : "blog" ,
 "id" : "blog" ,
 "label" : "Blog"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_image" , 
"padrão" : verdadeiro ,
 "label" : "Mostrar imagem em destaque"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "data_show" ,
 "padrão" : verdadeiro , 
"label" : "Mostrar data"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_autor" ,
 "padrão" : falso ,
 "label" : "Mostrar autor"
 } , 
{
 "tipo" : "caixa de seleção" ,
 "id" : "show_view_all" ,
 "padrão" : verdadeiro ,
 "label" : "Botão Ver tudo"
 } ,
 {
 "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" : "Cartão do blog"
 } ,
 {
 "tipo" : "cor" , 
"id" : "plano de fundo" ,
 "label" : "Fundo do cartão" ,
 "default" : "#eee"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "border_color" , 
"label" : "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" : "Contador"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "slider_button_fixed" ,
 "padrão" : verdadeiro ,
 "label" : "Botão deslizante corrigido"
 }
 ] ,
 "predefinições" : [
 { 
"name" : "Controle deslizante da lista de blogs"
 }
 ]
 }
 { % termina o esquema % }

 . blogSlider {
 preenchimento : 5 %;
 estouro : oculto ;
 } 
. blogSlider universal - controle deslizante - componente {
 posição : relativa ;
 exibição : bloco ;
 }
 . blogSlider . cartão__informações {
 preenchimento : 1,7rem 1rem ! importante ;
 }
 . blogSlider . cartão__cabeçalho {
 alinhamento de texto : centro ; 
}
 @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ínima : 750px ) {
 . blogSlider . grade -- col {
 largura : 33 %;
 }
 } 
@media screen e ( largura máxima : 749px ) {
 . blogSlider . grade -- col {
 largura : 50 %;
 }
 }
 @media screen e ( largura máxima : 481px ) {
 . blogSlider . grade -- col { 
min - largura : 100 %;
 largura : 100 %;
 }
 }
 . blogSlider . blogTitleWrapper {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : espaço entre ; 
margem inferior : 2rem ;
 }
 . blogSlider . Título do Blog {
 margem : automático 0 ;
 }
 . blogSlider . destaque - grade {
 exibição : flexível ;
 preenchimento : 0 ;
 } 
. blogSlider . destaque - grade li {
 estilo de lista : nenhum ;
 }
 . blogSlider li {
 estilo de lista : nenhum ;
 }
 . blogSlider . controle deslizante -- tablet {
 exibição : flexível ;
 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 ;
 }
 . blogSlider . coleção - lista__item {
 preenchimento : 1,5rem ;
 }
 . blogSlider . slider__slide {
 preenchimento - inferior : 0 ;
 preenchimento : 0 1rem ;
 } 
@media ( prefere - movimento reduzido ) {
 . controle deslizante -- em todos os lugares {
 comportamento de rolagem : automático ;
 }
 }
 . blogSlider . controle deslizante . controle deslizante - em todos os lugares. slider__slide {
 margem - inferior : 0 ; 
preenchimento - inferior : 0 ;
 scroll - snap - align : center ;
 }
 . blogSlider . controle deslizante {
 barra de rolagem -cor : rgb ( var ( -color - foreground ) ) 
rgba ( var ( -color - foreground ) , 0,04 ) ;
 -ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ;
 }
 . blogSlider . 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 ;
 }
 . blogSlider . controle deslizante ::- webkit - barra de rolagem - polegar { 
cor de fundo : rgb ( var ( -color - foreground ) ) ;
 raio da borda : 0,4rem ;
 borda : 0 ;
 }
 . blogSlider . controle deslizante ::- webkit - barra de rolagem - faixa { 
plano de fundo : rgba ( var ( -color - foreground ) , 0,04 ) ;
 raio da borda : 0,4rem ;
 }
 . blogSlider . 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 ) {
 . blogSlider . controle deslizante - contador - pontos ,
 . blogSlider . controle deslizante - contador - números { 
margem : 0 ;
 }
 }
 @media screen e ( largura máxima : 749px ) {
 . blogSlider . controle deslizante - contador__link {
 preenchimento : 0,7rem ;
 }
 } 
. blogSlider . slider - counter__link --pontos . ponto {
 largura : 1rem ;
 altura : 1rem ;
 borda - raio : 50 %; 
borda : 0,1rem sólido rgba ( var ( -color - foreground ) , 0,5 ) ;
 preenchimento : 0 ;
 exibição : bloco ;
 } 
. blogSlider . 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 - contador__link - números , 
. slider - counter__link --dots : not ( .slider - counter__link --active ) : hover. ponto ,
 . slider - counter__link -- números : hover {
 transformar : escala ( 1.1 ) ;
 } 
. blogSlider . controle deslizante - counter__link -- números {
 cor : rgba ( var ( -color - foreground ) , 0,5 ) ;
 decoração de texto : nenhuma ;
 } 
. blogSlider . slider - counter__link -- números : hover {
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 . blogSlider . controle deslizante - contador__link - ativo. controle deslizante - counter__link -- números { 
decoração de texto : sublinhado ;
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 . blogSlider . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ; 
justificar - conteúdo : centro ;
 }
 . blogSlider . 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
 destaque - slideshow - component : não ( .largura da página )
 . apresentação de slides__controls {
 border - bottom : nenhum ;
 } 
@media screen e ( largura mínima : 750px ) {
 . blogSlider . apresentação de slides__controls {
 posição : relativa ;
 }
 . controle deslizante - tablet. grade - espiada. grade__item {
 largura : 25 %;
 }
 } 
componente de apresentação de slides : não ( .largura da página ) . controle deslizante - botões {
 borda - direita : 0 ;
 borda - esquerda : 0 ;
 }
 . blogSlider . 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 ) {
 . blogSlider . contador -- celular {
 exibição : flexível ;
 }
 . blogSlider . apresentação de slides__control - wrapper {
 Mostrar nenhum ;
 }
 } 
. blogSlider . controle deslizante - contador__link {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . blogSlider . ponto pequeno {
 largura : 0,4rem ! importante ;
 altura : 0,4rem ! importante ; 
}
 . blogSlider . ponto médio {
 largura : 0,75rem ! importante ;
 altura : 0,75rem ! importante ;
 }
 . blogSlider . slidecontainer {
 largura : 100 %;
 }
 . blogSlider . 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 : 0,2s ; 
transição : opacidade 0,2s ;
 }
 . sliderCounter : pairar {
 opacidade : 1 ;
 }
 . sliderCounter ::- webkit - slider - polegar {
 -webkit -aparência : nenhum ;
 aparência : nenhuma ;
 altura : 5px ; 
margem : 10px 0 ;
 raio da borda : 5px ;
 fundo : preto ;
 cursor : ponteiro ;
 }
 . sliderCounter ::- moz - range - polegar {
 altura : 5px ;
 preenchimento : 5px ;
 margem : 10px 0 ; 
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 0,2s facilitam ;
 índice z : 10 ;
 }
 . blogSlider : passe o mouse. sliderCounterBtn -- anterior {
 esquerda : - 50px ;
 } 
. blogSlider : passe o mouse. sliderCounterBtn -- próximo {
 direita : - 50px ;
 }
 . sliderCounterBtn -- anterior > svg {
 transformar : girar ( 90 graus ) ;
 }
 . slider_button_fixed . sliderCounterBtn -- anterior { 
esquerda : - 100px ;
 }
 . slider_button_fixed . sliderCounterBtn -- próximo {
 direita : - 100px ;
 }
 . sliderCounterBtn -- anterior {
 esquerda : - 50px ;
 }
 . sliderCounterBtn -- próximo { 
direita : - 50px ;
 }
 . sliderCounterBtn -- próximo > svg {
 transformar : girar ( -90 graus ) ;
 }
 . sliderCounterButton : pairar {
 transformar : escala ( 1.1 ) ;
 } 
. sliderCounterButton > svg {
 altura : 2rem ! importante ;
 }
 @media screen e ( largura máxima : 749px ) {
 . sliderCounterBtn -- anterior {
 esquerda : 0 ;
 }
 . sliderCounterBtn -- próximo { 
direita : 0 ;
 }
 }

 classe UniversalSliderComponent estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . sliderControlWrapper = isto . querySelector ( ".botões deslizantes" ) ;
 esse . controle deslizante = isto . querySelector ( "ul" ) ; 
esse . sliderItems = este . querySelectorAll ( "li" ) ;
 esse . sliderCounter = este . querySelector ( ".sliderCounter" ) ; 
esse . currentPageElement = isto . querySelector ( ".slider-counter--current" ) ;
 esse . pageTotalElement = isto . querySelector ( ".slider-counter--total" ) ; 
esse . prevButton = isto . querySelector ( ".botão deslizante--prev" ) ;
 esse . próximoButton = isto . querySelector ( ".botão deslizante--próximo" ) ; 
esse . sliderButtonPrev = isto . querySelector ( ".sliderCounterBtn--prev" ) ;
 esse . sliderButtonNext = isto . querySelector ( ".sliderCounterBtn--next" ) ; 
esse . passo = 0 ;
 esse . sliderControlWrapper = isto . querySelector (
 ".slideshow__control-wrapper"
 ) ;
 esse . sliderControlLinksArray = Array. de ( 
esse . sliderControlWrapper . querySelectorAll ( ".slider-counter__link" )
 ) ;
 esse . sliderControlLinksArray . forEach ( ( t ) => 
t. addEventListener ( " clique " , isto.linkToSlide.bind ( isto ) )
 ) ; 
esse . botão anterior . addEventListener ( " clique " , isto.onButtonClick.bind ( isto ) ) ; 
esse . Próximo botão . addEventListener ( " clique " , isto.onButtonClick.bind ( isto ) ) ;
 if ( este . sliderCounter ) { 
esse . sliderButtonPrev . addEventListener (
 "clique" ,
 esse . onButtonClick . vincular ( isso )
 ) ;
 esse . sliderButtonNext . addEventListener (
 "clique" , 
esse . onButtonClick . vincular ( isso )
 ) ;
 esse . sliderContador . addEventListener (
 "mudar" ,
 esse . sliderCounterUpdate . vincular ( isso ) 
) ;
 }
 }
 atualizar ( t ) {
 esse . sliderItems . forEach ( ( t ) => {
 t. lista de classes . remover ( "imagem--ativa" ) ; 
t. removeAttribute ( "aria-atual" ) ;
 } ) ;
 esse . currentPageElement . HTML interno = t + 1 ; 
esse . pageTotalElement . innerHTML = isto . sliderItems . comprimento ;
 esse . sliderItems [ t ] . lista de classes . add ( "imagem--ativa" ) ; 
esse . sliderItems [ t ] . setAttribute ( "aria-current" , true ) ;
 esse . sliderControlButtons = isto . querySelectorAll ( ".slider-counter__link" ) ; 
esse . sliderControlButtons . forEach ( ( t ) => {
 t. lista de classes . remover ( "slider-counter__link--active" ) ;
 t. removeAttribute ( "aria-atual" ) ;
 } ) ; 
esse . sliderControlButtons [ t ] . lista de classes . add ( "slider-counter__link--active" ) ;
 esse . sliderControlButtons [ t ] . setAttribute ( "aria-current" , true ) ; 
esse . slideScrollPosition = t * this . sliderItems [ 0 ] . largura do cliente ;
 esse . controle deslizante . scrollTo ( { esquerda : este.slideScrollPosition } ) ; 
if ( este . sliderCounter ) {
 esse . sliderContador . valor = t ;
 }
 if ( this.querySelector ( " .dot" ) ) { 
const e = isto . querySelector ( ` [ dados - ponto = '${0}' ] ` ) . largura do cliente ; 
consts = isto . querySelector ( ` [ dados - ponto = '${t}' ] ` ) . deslocamentoEsquerda ; 
esse . querySelector ( ` [ dados - ponto = '${t}' ] ` ) . scrollIntoView ( {
 bloco : "mais próximo" ,
 embutido : "centro" ,
 } ) ; 
esse . querySelectorAll ( ` .ponto` ) . forEach ( ( t ) =>
 t. lista de classes . remover ( "ponto médio" )
 ) ; 
esse . querySelectorAll ( ` .ponto` ) . forEach ( ( t ) =>
 t. lista de classes . remover ( "pontopequeno" )
 ) ; 
se ( s > e * 10 ) {
 if ( t > 4 && t < this . sliderItems . length - 5 ) { 
esse . querySelector ( ` [ data - dot = '${t-5}' ] > . dot` ) . lista de classes . adicionar (
 "ponto pequeno"
 ) ; 
esse . querySelector ( ` [ data - dot = '${t-4}' ] > . dot` ) . lista de classes . adicionar (
 "ponto médio"
 ) ;
 }
 } 
if ( s < e * 10 + e * ( this . sliderItems . length - 1 ) ) { 
if ( t > 4 && t < this . sliderItems . length - 5 ) { 
esse . querySelector ( ` [ data - dot = '${t+4}' ] > . dot` ) . lista de classes . adicionar (
 "ponto médio"
 ) ; 
esse . querySelector ( ` [ data - dot = '${t+5}' ] > . dot` ) . lista de classes . adicionar (
 "ponto pequeno"
 ) ;
 }
 }
 }
 } 
onButtonClick ( t ) {
 t. preventDefault ( ) ;
 if ( t. currentTarget . 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 ( t ) {
 const e = t. atualTarget . conjunto de dados . ponto ;
 esse . passo = e ; 
esse . currentIndex ( este.passo ) ; _
 }
 índiceatual ( t ) {
 esse . atualização ( t ) ;
 }
 sliderCounterUpdate ( t ) { 
t. preventDefault ( ) ;
 esse . passo = isto . sliderContador . valor ;
 esse . currentIndex ( este.passo ) ; _
 }
 } 
elementos personalizados. define ( "componente deslizante universal" , UniversalSliderComponent ) ;