Controle deslizante de imagem do produto da coleção para o tema Shopify Dawn

{ { '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 = "coleção" > 
< 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 = "botão" > _ {{ section.settings.collection.url }} _ _ _ _ 
{ { - 'seções.featured_collection.view_all' | t - } }
 </a> _
 { % fim se % }
 </div> _ _ 
< destaque - controle deslizante - estilo do componente = "--border-color: {{section.settings.border_color}} ;" >
 < ul
 id = "Slider- {{ section.id }} "
 classe = "
 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 - pequena {% endif %}
 "
 função = "lista"
 >
 { %- 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 %} "
 >
 { % 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
 % } 
</ 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 . coleção . all_products_count > 2
 e swipe_on_mobile
 e seção. configurações . produtos_para_exibir > 2
 -% } 
< div class = "slideshow__controls slider-buttons no-js-hidden" style = "display: flex" >
 < botão
 tipo = "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 }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
< 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 % }
 </span> _
 </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%"
 ária - rótulo = "
 {{ '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 - } } 
{ %- outro -% }
 < span class = "ponto" </ span >
 { %- fim se -% }
 </ botão >
 { %- fim para -% } 
</div> _ _
 </div> _ _
 < botão
 tipo = "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 }} "
 >
 { % renderizar 'ícone-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 -% }
 < um
 href = "#Slide- {{ section.id }} - {{ forloop.index }} "
 dados - ponto = " {{forloop.index}} " 
class = "link slider-counter__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 -% }
 </ destaque - controle deslizante - componente >
 </div> _ _ 
{ % esquema % }
 {
 "name" : "Slider em destaque" ,
 "tag" : "seção" ,
 "class" : "seção espaçada" ,
 "configurações" : [
 { 
"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" : "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"
 } 
] ,
 "padrão" : "números" ,
 "rótulo" : "números"
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Controle deslizante da coleção em destaque"
 }
 ]
 } 
{ % termina o esquema % }

 { { '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 = "stylesheet" 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 = "coleção" >
 < 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 = "botão" > _ {{ section.settings.collection.url }} _ _ _ _ 
{ { - 'seções.featured_collection.view_all' | t - } }
 </a> _
 { % fim se % }
 </div> _ _
 
< destaque - controle deslizante - estilo do componente = "--border-color: {{section.settings.border_color}} ;" >
 < ul
 id = "Slider- {{ section.id }} "
 classe = "
 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 - pequena {% endif %}
 "
 função = "lista"
 >
 { %- 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 %} "
 >
 { % 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
 % }
 </ li >
 { %- outro -% } 
{ %- para i em ( 1 .. 4 ) -% }
 < li class = "grid__item" >
 { % renderizar 'espaço reservado para cartão de produto' % }
 </ li > 
{ %- fim para -% }
 { %- fim para -% }
 </ul> _
 { % -se seção. configurações . coleção . all_products_count > 2
 e swipe_on_mobile 
e seção. configurações . produtos_para_exibir > 2
 -% }
 < div class = "slideshow__controls slider-buttons no-js-hidden" style = "display: flex" >
 < botão
 tipo = "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 }} "
 >
 { % renderizar 'ícone-caret' % }
 </ botão > 
< 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 % }
 </span> _
 </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%"
 ária - rótulo = "
 {{ '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 - } } 
{ %- outro -% }
 < span class = "ponto" </ span >
 { %- fim se -% }
 </ botão >
 { %- fim para -% } 
</div> _ _
 </div> _ _
 < botão
 tipo = "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 }} "
 >
 { % renderizar 'ícone-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 -% }
 < um
 href = "#Slide- {{ section.id }} - {{ forloop.index }} "
 dados - ponto = " {{forloop.index}} " 
class = "link slider-counter__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 -% }
 </ destaque - controle deslizante - componente >
 </div> _ _ 
{ % esquema % }
 {
 "name" : "Slider em destaque" ,
 "tag" : "seção" ,
 "class" : "seção espaçada" ,
 "configurações" : [
 { 
"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" : "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" : "t:sections.featured-collection.settings.show_secondary_image.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "add_image_padding" ,
 "padrão" : falso , 
"label" : "t:sections.featured-collection.settings.add_image_padding.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_image_outline" ,
 "padrão" : verdadeiro , 
"label" : "t:sections.featured-collection.settings.show_image_outline.label"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_vendor" ,
 "padrão" : falso ,
 "label" : "t:sections.featured-collection.settings.show_vendor.label" 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_rating" ,
 "padrão" : falso ,
 "label" : "t:sections.featured-collection.settings.show_rating.label" , 
"info" : "t:sections.featured-collection.settings.show_rating.info"
 } ,
 {
 "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"
 }
 ] ,
 "padrão" : "números" ,
 "rótulo" : "números"
 }
 ] , 
"predefinições" : [
 {
 "name" : "Controle deslizante da coleção em destaque"
 }
 ]
 }
 { % termina o esquema % }

 . coleção {
 preenchimento : 5 %;
 } 
controle deslizante - 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 %;
 }
 }
 . destaque - título - wrapper {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : espaço entre ;
 margem inferior : 2rem ;
 } 
. destaque - título {
 margem : automático 0 ;
 }
 . destaque - grade {
 exibição : flexível ;
 preenchimento : 0 ;
 }
 . destaque - grade li {
 estilo de lista : nenhum ;
 } 
. 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 ;
 }
 . slider__slide {
 preenchimento - inferior : 0 ;
 preenchimento : 0 1rem ;
 } 
@media ( prefere - movimento reduzido ) {
 . controle deslizante -- em todos os lugares {
 comportamento de rolagem : automático ;
 }
 }
 . controle deslizante . controle deslizante - em todos os lugares. slider__slide {
 margem - inferior : 0 ; 
preenchimento - inferior : 0 ;
 scroll - snap - align : center ;
 }
 . 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 ;
 }
 . 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 ;
 }
 . controle deslizante ::- webkit - barra de rolagem - polegar {
 cor de fundo : rgb ( var ( -color - foreground ) ) ; 
raio da borda : 0,4rem ;
 borda : 0 ;
 }
 . controle deslizante ::- webkit - barra de rolagem - faixa {
 plano de fundo : rgba ( var ( -color - foreground ) , 0,04 ) ; 
raio da borda : 0,4rem ;
 }
 . 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 ) {
 . controle deslizante - contador - pontos ,
 . controle deslizante - contador - números {
 margem : 0 ;
 }
 }
 @media screen e ( largura máxima : 749px ) { 
. controle deslizante - contador__link {
 preenchimento : 0,7rem ;
 }
 }
 . 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 ;
 } 
. 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 ) ;
 } 
. controle deslizante - counter__link -- números {
 cor : rgba ( var ( -color - foreground ) , 0,5 ) ;
 decoração de texto : nenhuma ;
 }
 . slider - counter__link -- números : hover { 
cor : rgb ( var ( -color - foreground ) ) ;
 }
 . controle deslizante - contador__link - ativo. controle deslizante - counter__link -- números {
 decoração de texto : sublinhado ; 
cor : rgb ( var ( -color - foreground ) ) ;
 }
 . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 } 
. 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 ) {
 . 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 ;
 }
 . apresentação de slides__control - wrapper {
 exibição : flexível ; 
largura : 30rem ;
 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 ) {
 . contador -- celular {
 exibição : flexível ;
 }
 . apresentação de slides__control - wrapper {
 Mostrar nenhum ;
 }
 }
 . controle deslizante - contador__link { 
exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . ponto pequeno {
 largura : 0,4rem ! importante ;
 altura : 0,4rem ! importante ;
 }
 . ponto médio {
 largura : 0,75rem ! importante ; 
altura : 0,75rem ! importante ;
 }

 classe FeaturedSliderComponent estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . t = isso . querySelector ( ".botões deslizantes" ) ;
 esse . eu = isso . querySelector ( '[id^="Slider-"]' ) ; 
esse . h = isso . querySelectorAll ( '[id^="Slide-"]' ) ;
 esse . o = isso . querySelector ( ".slider-counter--current" ) ; 
esse . eu = isso . querySelector ( ".slider-counter--total" ) ;
 esse . você = isso . querySelector ( 'botão[nome="anterior"]' ) ; 
esse . m = isso . querySelector ( 'botão[nome="próximo"]' ) ;
 esse . passo = 0 ; 
esse . t = isso . querySelector ( ".slideshow__control-wrapper" ) ;
 este ._ = Matriz. from ( this.t.querySelectorAll ( " . slider -counter__link" ) ) ; 
esse ._. forEach ( ( t ) => t.addEventListener ( "clique" , este . p . vincular ( este ) )) ) ; 
esse . você . addEventListener ( "clique" , este .$. vincular ( este ) ) ; 
esse . m . addEventListener ( "clique" , este .$. vincular ( este ) ) ;
 }
 atualizar ( t ) { 
esse . h . forEach ( ( t ) => {
 t. lista de classes . remover ( "imagem--ativa" ) ;
 t. removeAttribute ( "aria-atual" ) ;
 } ) ; 
esse . ó . HTML interno = t + 1 ;
 esse . eu . innerHTML = isto . h . comprimento ; 
esse . h [ t ] . lista de classes . add ( "imagem--ativa" ) ;
 esse . h [ t ] . setAttribute ( "aria-current" , true ) ; 
esse . k = isso . querySelectorAll ( ".slider-counter__link" ) ;
 esse . k . forEach ( ( t ) => { 
t. lista de classes . remover ( "slider-counter__link--active" ) ;
 t. removeAttribute ( "aria-atual" ) ;
 } ) ; 
esse . k [ t ] . lista de classes . add ( "slider-counter__link--active" ) ;
 esse . k [ t ] . setAttribute ( "aria-current" , true ) ; 
esse . v = t * isto . h [ 0 ] . largura do cliente ;
 esse . eu . scrollTo ( { esquerda : este.v } ) ; 
const i = isto . querySelector ( ` [ dados - ponto = '${0}' ] ` ) . largura do cliente ; 
consts = isto . querySelector ( ` [ dados - ponto = '${t}' ] ` ) . deslocamentoEsquerda ; 
esse . querySelector ( ` [ dados - ponto = '${t}' ] ` ) . scrollIntoView ( {
 D : "mais próximo" ,
 S : "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 > i * 10 ) {
 if ( t > 4 && t < this . h . 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 < i * 10 + i * ( this . h . length - 1 ) ) { 
if ( t > 4 && t < this . h . 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"
 ) ;
 }
 }
 }
 $ ( t ) { 
t. preventDefault ( ) ;
 if ( t. currentTarget . nome === "próximo" ) {
 esse . passo ++; 
if ( este . passo > este . h . comprimento - 1 ) {
 esse . passo = 0 ;
 }
 } outro { 
esse . etapa --;
 if ( este . passo < 0 ) {
 esse . passo = isto . h . comprimento - 1 ;
 }
 } 
esse . g ( esta etapa ) ;
 }
 p ( t ) {
 const i = t. atualTarget . conjunto de dados . C ;
 esse . passo = eu ; 
esse . g ( esta etapa ) ;
 }
 g ( t ) {
 esse . atualização ( t ) ;
 }
 } 
elementos personalizados. define ( "componente deslizante em destaque" , FeaturedSliderComponent ) ;