Controle deslizante da lista de coleções

{ { 'lista de coleção-slider.css' | URL_do_asset | folha_de_estilo } } 
< div
 class = "coleçãoListSlider"
 style = "padding-top: {{ section.settings.padding_top | append: " % " }} ; padding-bottom: {{section.settings.padding_bottom }} "
 >
 < div class = "collectionListTitleWrapper {% if section.settings.title == blank %} title-wrapper-with-link--no-heading {% endif %} " > 
{ % se seção. configurações . título ! = em branco % }
 < h2 class = "collectionListTitle" > { { seção. configurações . título | escapar } } < / h2 > 
{ % fim se % }
 { % se seção. configurações . mostrar_view_all % }
 < a href = "/collections" 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" >
 < botão
 tipo = "botão" 
class = "sliderCounterButton sliderCounterBtn--prev botão deslizante {% if section.settings.slider_button_fixed != true %} slider_button_fixed {% endif %} "
 nome = "anterior"
 aria - label = "slide anterior"
 estilo = "exibição:flex"
 aria -controls = "Slider- {{ section.id }} "
 > 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon icon-caret" viewBox = "0 0 10 6" > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4- 4a.5.5 0 000-.708z" fill = "currentColor" / >
 < / svg >
 < / botão > 
< / div >
 { % fim se % }
 < ul class = "controle deslizante da grade de produtos - tablet" role = "lista" >
 { %- para bloco na seção. blocos -% } 
{ % atribuir block_length = forloop. comprimento % }
 < li
 class = "collection-list__item grid__item grid--col {% if section.settings.swipe_on_mobile %} slider__slide {% endif %} "
 { { bloquear. shopify_atributos } }
 > 
{ % atribuir card_collection = bloquear. configurações . coleção % }
 { % atribuir media_aspect_ratio = seção. configurações . proporção_da_imagem % }
 { % atribuir colunas = colunas % }
 { %- líquido 
atribuir proporção = 1
 se card_collection. feature_image e media_aspect_ratio == 'retrato'
 atribuir proporção = 0,8
 elsif card_collection. feature_image e media_aspect_ratio == 'adaptar'
 atribuir proporção = card_collection. imagem em destaque . proporção da tela
 fim se 
se proporção == 0 ou proporção == nulo
 atribuir proporção = 1
 fim se
 -% }
 < div class = "card-wrapper animate-arrow" >
 < div
 classe = "
 cartão cartão-- {{ settings.card_style }} 
{% if card_collection.featured_image %} cartão--mídia {% else %} cartão--texto {% endif %}
 {% if settings.card_style == 'card' %} cor- {{ settings.card_color_scheme }} {% endif %}
 {% if extend_height %} cartão--extend-height {% endif %}
 {% if card_collection.featured_image == nil and settings.card_style == 'card' %} proporção {% endif %}
 "
 style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;"
 >
 < div 
class = "card__inner {% if settings.card_style == 'standard' %} color- {{ settings.card_color_scheme }} {% endif %} {% if card_collection.featured_image or settings.card_style == 'standard' %} proporção {% endif %} "
 style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;"
 >
 { %- se coleção_cartão. imagem em destaque -% } 
< div class = "cartão__media" >
 < div class = "media media--transparent media--hover-effect" >
 < imagem
 srcset = "
 {%- if card_collection.featured_image.width >= 165 -%} {{ card_collection.featured_image | img_url: '165x' }} 165w, {%- endif -%} 
{%- if card_collection.featured_image.width >= 330 -%} {{ card_collection.featured_image | img_url: '330x' }} 330w, {%- endif -%}
 {%- if card_collection.featured_image.width >= 535 -%} {{ card_collection.featured_image | img_url: '535x' }} 535w, {%- endif -%}
 {%- if card_collection.featured_image.width >= 750 -%} {{ card_collection.featured_image | img_url: '750x' }} 750w, {%- endif -%}
 {%- if card_collection.featured_image.width >= 1000 -%} {{ card_collection.featured_image | img_url: '1000x' }} 1000w, {%- endif -%} 
{%- if card_collection.featured_image.width >= 1500 -%} {{ card_collection.featured_image | img_url: '1500x' }} 1500w, {%- endif -%}
 {%- if card_collection.featured_image.width >= 3000 -%} {{ card_collection.featured_image | img_url: '3000x' }} 3000w, {%- endif -%}
 {{ card_collection.featured_image | img_url: 'master' }} {{ card_collection.featured_image.width }} w
 "
 src = " {{ card_collection.featured_image | img_url: '1500x' }} "
 tamanhos = " 
(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 100 | divided_by: columns }} px,
 (largura mínima: 750px) {% if columns > 1 %} calc((100vw - 10rem) / 2) {% else %} calc(100vw - 10rem) {% endif %} ,
 calc(100vw - 3rem)
 "
 alt = " {{ card_collection.title | escape }} "
 altura = " {{ card_collection.featured_image.height }} "
 largura = " {{ card_collection.featured_image.width }} "
 carregando = "preguiçoso" 
class = "redução de movimento"
 >
 < / div >
 < / div >
 { %- fim se -% }
 < div class = "cartão__content" > 
< div class = "cartão__informações" >
 < h3 classe = "card__heading" >
 <a href = "{{ card_collection.url }} " class = "full-unstyled-link" > _ {{ card_collection.url }} _ _ _ _ 
{ %- se coleção_cartão. título ! = em branco -% }
 { { - coleção_cartões. título | escapar - } }
 { %- fim se -% } 
{ %- se coleção_cartão. descrição == em branco -% }
 < span class = "icon-wrap" >
 < svg
 viewBox = "0 0 14 10"
 preencher = "nenhum"
 aria - oculto = "verdadeiro"
 focalizável = "falso" 
role = "apresentação"
 class = "ícone ícone-seta"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11 .793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill = "currentColor" / >
 < / svg >
 < / intervalo > 
{ % fim se % }
 < / a >
 < / h3 >
 { %- se coleção_cartão. descrição ! = em branco -% }
 < p class = "cartão__caption" > 
{ { - coleção_cartões. descrição | tira_html | palavras truncadas : 12 - } }
 < span class = "icon-wrap"
 > & nbsp ;
 < svg
 viewBox = "0 0 14 10"
 preencher = "nenhum" 
aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-seta"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11 .793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill = "currentColor" / >
 < / svg >
 < / intervalo > 
< / p >
 { %- fim se -% }
 < / div >
 < / div >
 < / div > 
{ % se configurações. card_style == 'cartão' ou card_collection. imagem em destaque % }
 < div class = "cartão__content" >
 < div class = "cartão__informações" > 
< h3 classe = "card__heading" >
 <a href = "{{ card_collection.url }} " class = "full-unstyled-link" > _ {{ card_collection.url }} _ _ _ _
 { %- se coleção_cartão. título ! = em branco -% } 
{ { - coleção_cartões. título | escapar - } }
 { %- fim se -% }
 { %- se coleção_cartão. feature_image ou card_collection. descrição == em branco -% } 
< span class = "icon-wrap" >
 < svg
 viewBox = "0 0 14 10"
 preencher = "nenhum"
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-seta"
 xmlns = "http://www.w3.org/2000/svg" 
>
 < preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11 .793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill = "currentColor" / >
 < / svg >
 < / intervalo > 
{ % fim se % }
 < / a >
 < / h3 >
 { %- se coleção_cartão. feature_image == null e card_collection. descrição ! = em branco -% } 
< p class = "cartão__caption" >
 { { - coleção_cartões. descrição | tira_html | palavras truncadas : 12 - } }
 < span class = "icon-wrap"
 > & nbsp ; 
< svg
 viewBox = "0 0 14 10"
 preencher = "nenhum"
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-seta"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M8.537.808a.5.5 0 01.817-.162l4 4a.5.5 0 010 .708l-4 4a.5.5 0 11-.708-.708L11 .793 5.5H1a.5.5 0 010-1h10.793L8.646 1.354a.5.5 0 01-.109-.546z" fill = "currentColor" / >
 < / svg >
 < / intervalo > 
< / p >
 { %- fim se -% }
 < / div >
 < / div >
 { % fim se % }
 < / div > 
< / div >

 <estilo> _
 . coleçãoListSlider . 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' % }
 < botão
 tipo = "botão" 
class = "sliderCounterButton sliderCounterBtn--próximo botão deslizante {% if section.settings.slider_button_fixed != true %} slider_button_fixed {% endif %} "
 nome = "próximo"
 estilo = "exibição:flex"
 aria - label = "próximo slide"
 aria -controls = "Slider- {{ section.id }} "
 > 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon icon-caret" viewBox = "0 0 10 6" > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4- 4a.5.5 0 000-.708z" fill = "currentColor" / >
 < / svg >
 < / botão > 
{ % 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> _
 . coleçãoListSlider . sliderCounter :: - webkit - slider - polegar {
 largura : calc ( 100 % / { { comprimento_do_bloco } } ) ; 
}

 . coleçãoListSlider . sliderCounter :: -moz -range -polegar {
 largura : calc ( 100 % / { { comprimento_do_bloco } } ) ;
 }
 < / estilo > 
{ % fim se % }

 < div
 class = "slideshow__controls botões deslizantes no-js-hidden {% if section.settings.slider_visual == 'slider' %} oculto {% endif %} "
 estilo = "exibição:flex"
 >
 < botão
 tipo = "botão"
 class = "botão deslizante botão deslizante--anterior" 
dados - etapa = "1"
 nome = "anterior"
 aria - label = "slide anterior"
 aria -controls = "Slider- {{ section.id }} "
 > 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon icon-caret" viewBox = "0 0 10 6" > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4- 4a.5.5 0 000-.708z" fill = "currentColor" / >
 < / svg >
 < / 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" > { { block_length } } < / span >
 < / div >
 < div class = "slideshow__control-wrapper slider" > 
{ %- para bloco na seção. blocos -% }
 < 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 = "carregar slide {{ forloop.index }} controle deslizante de {{ 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 = "próximo slide"
 aria -controls = "Slider- {{ section.id }} "
 >
 < svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon icon-caret" viewBox = "0 0 10 6" > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4- 4a.5.5 0 000-.708z" fill = "currentColor" / >
 < / svg >
 < / botão > 
< / div >
 <noscript> _
 < div class = "botões deslizantes" style = "display: flex" >
 < div class = "contador deslizante" > 
{ %- para bloco na seção. blocos -% }
 < um
 href = "#Slide- {{ section.id }} - {{ forloop.index }} "
 dados - ponto = " {{forloop.index}} "
 class = "link slider-counter__link" 
aria - label = "carregar slide {{ forloop.index }} controle deslizante de {{ forloop.length}} "
 >
 { { forloop. índice } }
 < / a >
 { %- fim para -% }
 < / div > 
< / div >
 < / noscript >
 { %- fim se -% }
 < / universal - controle deslizante - componente >
 < / div >

 { % esquema % } 
{
 "name" : "Controle deslizante da lista de coleções" ,
 "tag" : "seção" ,
 "class" : "seção espaçada" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "default" : "Coleções" , 
"rótulo" : "Título"
 } ,
 {
 "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 de coleção"
 } ,
 {
 "tipo" : "selecionar" , 
"id" : "image_ratio" ,
 "opções" : [
 {
 "valor" : "adaptar" ,
 "rótulo" : "adaptar"
 } ,
 {
 "valor" : "retrato" ,
 "rótulo" : "retrato"
 } ,
 { 
"valor" : "quadrado" ,
 "rótulo" : "quadrado"
 }
 ] ,
 "padrão" : "quadrado" ,
 "label" : "Proporção da imagem"
 } ,
 {
 "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"
 }
 ] ,
 "blocos" : [
 {
 "type" : "featured_collection" ,
 "nome" : "coleção em destaque" ,
 "configurações" : [
 { 
"tipo" : "coleção" ,
 "id" : "coleção" ,
 "rótulo" : "Coleção"
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Controle deslizante da lista de coleções"
 }
 ]
 } 
{ % termina o esquema % }

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

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

 . coleçãoListSlider . cartão__informações {
 preenchimento - inferior : 1rem ;
 preenchimento - topo : 1rem ;
 }

 . coleçãoListSlider . 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á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çãoListSlider . coleçãoListTitleWrapper {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : espaço entre ;
 margem inferior : 2rem ;
 }
 
. coleçãoListSlider . coleçãoListTitle {
 margem : automático 0 ;
 }

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

 . coleçãoListSlider . destaque - grade li { 
estilo de lista : nenhum ;
 }
 . coleçãoListSlider li {
 estilo de lista : nenhum ;
 }

 . coleçãoListSlider . 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 ; 
largura : 100 % ;

 }
 . coleçãoListSlider . coleção - lista__item {
 preenchimento : 1,5rem ;
 borda : 5px sólido transparente ;
 }

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

 @media ( prefere - movimento reduzido ) {
 . controle deslizante -- em todos os lugares {
 comportamento de rolagem : automático ;
 }
 }
 
. coleçãoListSlider . controle deslizante . controle deslizante - em todos os lugares. slider__slide {
 margem - inferior : 0 ;
 preenchimento - inferior : 0 ;
 scroll - snap - align : center ;
 }

 /* Barra de rolagem */
 
. coleçãoListSlider . 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çãoListSlider . 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çãoListSlider . controle deslizante :: - webkit - barra de rolagem - polegar {
 cor de fundo : rgb ( var ( -color - foreground ) ) ;
 raio da borda : 0,4rem ;
 borda : 0 ; 
}

 . coleçãoListSlider . controle deslizante :: - webkit - barra de rolagem - faixa {
 plano de fundo : rgba ( var ( -color - foreground ) , 0,04 ) ;
 raio da borda : 0,4rem ;
 }
 
. coleçãoListSlider . 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çãoListSlider . controle deslizante - contador - pontos,
 . coleçãoListSlider . controle deslizante - contador - números {
 margem : 0 ;
 }
 }


 @media screen e ( largura máxima : 749px ) { 
. coleçãoListSlider . controle deslizante - contador__link {
 preenchimento : 0,7rem ;
 }
 }

 . coleçãoListSlider . 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çãoListSlider . 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çãoListSlider . controle deslizante - counter__link -- números {
 cor : rgba ( var ( -color - foreground ) , 0,5 ) ;
 decoração de texto : nenhuma ;
 }
 
. coleçãoListSlider . slider - counter__link -- números : hover {
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 
. coleçãoListSlider . controle deslizante - contador__link - ativo. controle deslizante - counter__link -- números {
 decoração de texto : sublinhado ;
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 
. coleçãoListSlider . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }

 . coleçãoListSlider . 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çãoListSlider . 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 ;
 }
 
. coleçãoListSlider . 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 ) ! importante ; 
}

 . contador -- celular {
 Mostrar nenhum ;
 }

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

 . coleçãoListSlider . controle deslizante - contador__link {
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 
. coleçãoListSlider . ponto pequeno {
 largura : 0,4rem ! importante ;
 altura : 0,4rem ! importante ;
 }

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


 /* contador do controle deslizante */
 
. coleçãoListSlider . slidecontainer {
 largura : 100 % ;
 }

 . coleçãoListSlider . 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 ;
 margem : 10px 0 ;
 raio da borda : 5px ;
 fundo : preto ; 
cursor : ponteiro ;
 }

 . sliderCounter :: -moz -range -polegar {
 altura : 5px ;
 preenchimento : 5px ;
 raio da borda : 5px ;
 margem : 10px 0 ;
 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çãoListSlider : pairar. sliderCounterBtn -- anterior {
 esquerda : - 5 % ;
 }

 . coleçãoListSlider : pairar. sliderCounterBtn -- próximo { 
certo : - 5 % ;
 }

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

 . slider_button_fixed . sliderCounterBtn -- anterior {
 esquerda : - 10 % ; 
}

 . slider_button_fixed . sliderCounterBtn -- próximo {
 certo : - 10 % ;
 }

 . sliderCounterBtn -- anterior {
 esquerda : - 5 % ;
 }

 . sliderCounterBtn -- próximo { 
certo : - 5 % ;
 }

 . 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 : - 5 % ;
 } 
. sliderCounterBtn -- próximo {
 certo : - 5 % ;
 }
 }

 . cartão - invólucro {
 cor : herdar ;
 altura : 100 % ;
 posição : relativa ;
 decoração de texto : nenhuma ; 
}

 . cartão {
 alinhamento de texto : var ( -card - text - align ) ;
 decoração de texto : nenhuma ;
 }

 . cartão -- cartão {
 altura : 100 % ;
 }
 
. cartão - cartão,
 . cartão - padrão. cartão__inner {
 border - radius : var ( -card - corner - radius ) ; 
borda : var ( -card - border - width ) solid rgba ( var ( -color - foreground ) , var ( -card - border - opacity ) ) ;
 posição : relativa ; 
dimensionamento da caixa : caixa de borda ;
 }

 . cartão - cartão : depois,
 . cartão - padrão. card__inner : depois de {
 contente : '' ;
 posição : absoluta ; 
largura : calc ( var ( -card - border - width ) * 2 + 100 % ) ; 
altura : calc ( var ( -card - border - width ) * 2 + 100 % ) ; 
topo : calc ( var ( -card - border - width ) * - 1 ) ;
 esquerda : calc ( var ( -card - border - width ) * - 1 ) ; 
z - índice : -1 ;
 border - radius : var ( -card - corner - radius ) ; 
box - shadow : var ( -card - shadow - horizontal - offset ) var ( -card - shadow - vertical - offset ) var ( -card - shadow - blur - radius ) rgba ( var ( -color - shadow ) , var ( -card - shadow - opacity ) ) ; 
}

 . cartão . cartão__inner . cartão__media {
 estouro : oculto ;
 /* Correção do bug da borda do Safari ao passar o mouse */
 índice z : 0 ; 
border - radius : calc ( var ( -card - corner - radius ) -var ( -card - border - width ) -var ( -card - image - padding ) ) ;
 }
 
. cartão - cartão. cartão__inner . cartão__media {
 borda - inferior - direita - raio : 0 ;
 borda - inferior - esquerda - raio : 0 ;
 }

 . cartão - padrão. cartão -- texto { 
cor de fundo : transparente ;
 }

 . cartão - informações {
 alinhamento de texto : var ( -card - text - align ) ;
 }

 . cartão__mídia ,
 . cartão . meios de comunicação {
 inferior : 0 ; 
posição : absoluta ;
 topo : 0 ;
 }

 . cartão . meios de comunicação {
 largura : 100 % ;
 }

 . cartão__media {
 margem : var ( -card - image - padding ) ; 
largura : calc ( 100 % -2 * var ( -card - image - padding ) ) ;
 }

 . cartão - padrão. cartão__media { 
margem : var ( -card - image - padding ) ;
 }

 . cartão__inner {
 largura : 100 % ;
 }

 . cartão - mídia. cartão__inner . cartão__content { 
preenchimento : calc ( var ( -card - image - padding ) + 1rem ) ;
 posição : relativa ;
 }

 . cartão__content {
 exibição : grade ; 
grid - template - rows : minmax ( 0,1fr ) max - content minmax ( 0,1fr ) ;
 preenchimento : 1rem ;
 largura : 100 % ;
 }

 . card__content -- auto - margens { 
grid - template - rows : minmax ( 0 , auto ) max - content minmax ( 0 , auto ) ;
 }

 . cartão__informações {
 grade - linha - início : 2 ;
 preenchimento : 1,3rem 1rem ;
 }
 
@media screen e ( largura mínima : 750px ) {
 . cartão__informações {
 preenchimento inferior : 1,7rem ;
 preenchimento - topo : 1,7rem ;
 }
 }

 . cartão__crachá {
 alinhar - self : flex - end ; 
grade - linha - início : 3 ;
 justificar - self : flex - start ;
 }

 . cartão__crachá . principal {
 alinhar - self : flex - start ;
 grade - linha - início : 1 ;
 }
 
. cartão__crachá . certo {
 justificar - self : flex - end ;
 }

 . cartão__mídia . imagem de mídia {
 altura : 100 % ;
 ajuste ao objeto : capa ;
 posição do objeto : centro centro ; 
largura : 100 % ;
 }

 . card__inner : não ( . ratio ) > . cartão__content {
 altura : 100 % ;
 }

 . cartão__cabeçalho { 
margem - topo : 0 ;
 }

 . card__heading : último - filho {
 margem - inferior : 0 ;
 }

 . cartão - cartão. cartão -- mídia > . cartão__content { 
margin - top : calc ( 0rem - var ( -card - image - padding ) ) ;
 }

 . cartão - padrão. cartão - texto a :: depois ,
 . cartão - cartão. card__heading a :: depois de { 
inferior : calc ( var ( -card - border - width ) * - 1 ) ;
 esquerda : calc ( var ( -card - border - width ) * - 1 ) ; 
direita : calc ( var ( -card - border - width ) * - 1 ) ;
 topo : calc ( var ( -card - border - width ) * - 1 ) ;
 }
 
. card__heading a :: depois de {
 inferior : 0 ;
 contente : "" ;
 esquerda : 0 ;
 posição : absoluta ;
 direita : 0 ;
 topo : 0 ; 
índice z : 1 ;
 }

 . card__heading a : depois de {
 deslocamento do contorno : 0,3rem ;
 }

 . card__heading a : foco : depois de { 
box - shadow : 0 0 0 0,3rem rgb ( var ( -color - fundo ) ) , 0 0 0,5rem 0,4rem rgba ( var ( -color - foreground ) , 0,3 ) ; 
contorno : 0,2rem sólido rgba ( var ( -color - foreground ) , 0,5 ) ;
 }

 . card__heading a : foco - visível : depois de { 
box - shadow : 0 0 0 0,3rem rgb ( var ( -color - fundo ) ) , 0 0 0,5rem 0,4rem rgba ( var ( -color - foreground ) , 0,3 ) ; 
contorno : 0,2rem sólido rgba ( var ( -color - foreground ) , 0,5 ) ;
 }

 . card__heading a : foco : não ( : foco - visível ) : depois de {
 box - shadow : nenhum ; 
contorno : 0 ;
 }

 . card__heading a : foco {
 box - shadow : nenhum ;
 contorno : 0 ;
 }

 @media screen e ( largura mínima : 990px ) { 
. cartão . meios de comunicação . media -- hover - effect > img : only - child,
 . invólucro de cartão . meios de comunicação . mídia -- hover - effect > img : only - child { 
transição : transform var ( -duração - longa ) facilidade ;
 }

 . cartão : passe o mouse. meios de comunicação . mídia - hover - effect > img : primeiro - filho : único - filho, 
. card - wrapper : hover. meios de comunicação . mídia -- hover - effect > img : primeiro - filho : único - filho {
 transformar : escala ( 1,03 ) ;
 }

 . cartão - wrapper : pairar 
. meios de comunicação . mídia - pairar - efeito
 > img : primeiro - filho : não ( : único - filho ) {
 opacidade : 0 ;
 }
 
. card - wrapper : hover. meios de comunicação . mídia -- hover - efeito > img + img {
 opacidade : 1 ;
 transição : transform var ( -duração - longa ) facilidade ; 
transformar : escala ( 1,03 ) ;
 }

 . sublinhado - links - passar o mouse : passar o mouse sobre {
 decoração de texto : sublinhado ;
 texto - sublinhado - deslocamento : 0,3rem ;
 }
 }
 
. cartão - padrão. cartão - mídia. cartão__inner . cartão__informações ,
 . cartão - padrão. cartão -- texto > . cartão__content . card__heading ,
 . cartão - padrão > . cartão__content . cartão__crachá , 
. cartão - padrão. cartão - texto. artigo - cartão > . cartão__content . cartão__informações ,
 . cartão - padrão > . cartão__content . cartão__caption {
 Mostrar nenhum ;
 }
 
. cartão - padrão > . cartão__content {
 preenchimento : 0 ;
 }

 . cartão - padrão > . cartão__content . cartão__informações {
 preenchimento - esquerda : 0 ;
 preenchimento - direita : 0 ; 
}

 . cartão - cartão. cartão - mídia. cartão__inner . cartão__informações ,
 . cartão - cartão. cartão - texto. cartão__interior ,
 . cartão - cartão. cartão -- mídia > . cartão__content . cartão__crachá {
 Mostrar nenhum ;
 }
 
. cartão -- estender - altura {
 altura : 100 % ;
 }

 . cartão - estender - altura. cartão - padrão. cartão - texto,
 . cartão - estender - altura. cartão -- mídia {
 exibição : flexível ; 
flex - direction : coluna ;
 }

 . cartão - estender - altura. cartão - padrão. cartão - texto. cartão__interior ,
 . cartão - estender - altura. cartão - mídia. cartão__inner {
 flex - crescer : 1 ; 
}

 . cartão . ícone - embrulhar {
 margem - esquerda : 0,8rem ;
 espaço em branco : nowrap ;
 transição : transform var ( -duração - curta ) facilidade ;
 estouro : oculto ;
 }
 
. cartão - informações > * + * {
 margem superior : 0,5rem ;
 }

 . cartão - informações {
 largura : 100 % ;
 }

 . cartão - informações > * { 
altura da linha : calc ( 1 + 0.4 / var ( -font - body - scale ) ) ;
 cor : rgb ( var ( -color - foreground ) ) ;
 }
 
. cartão - informações > . preço {
 cor : rgb ( var ( -color - foreground ) ) ;
 }

 . cartão - informações > . avaliação {
 margem superior : 0,4rem ;
 }
 
. cartão - informações
 > * : não ( . visualmente oculto : primeiro filho )
 + * : não ( . classificação ) {
 margem - topo : 0,7rem ;
 }
 
. cartão - informações . legenda {
 espaçamento entre letras : 0,07rem ;
 }

 . cartão - artigo - informações {
 margem - topo : 1rem ;
 }

 @media screen e ( largura máxima : 749px ) { 
. coleção . grid__item : somente - filho {
 flexível : 0 0 100 % ;
 largura máxima : 100 % ;
 }
 }

 @media screen e ( largura mínima : 750px ) { 
. coleção . título - wrapper - com - link -- sem - título {
 margin - top : calc ( 6rem + var ( -page - width - margin ) ) ;
 }
 }
 
@media screen e ( largura máxima : 989px ) {
 . coleção . controle deslizante . controle deslizante -- tablet {
 margem inferior : 1,5rem ;
 }
 }

 . coleção . carregando - sobreposição {
 topo : 0 ; 
direita : 0 ;
 inferior : 0 ;
 esquerda : 0 ;
 Mostrar nenhum ;
 largura : 100 % ;
 preenchimento : 0 1,5rem ;
 opacidade : 0,7 ;
 }
 
@media screen e ( largura mínima : 750px ) {
 . coleção . carregando - sobreposição {
 preenchimento - esquerda : 5rem ;
 preenchimento - direita : 5rem ;
 }
 }

 . coleção . carregando . carregando - sobreposição { 
exibição : bloco ;
 }

 . coleção - vazia. título - wrapper {
 margem - topo : 10rem ;
 margem inferior : 15rem ;
 }

 . coleção__view - todos {
 margem - topo : 2rem ;
 } 

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 ( '.slider-button--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. 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 ( este ) ) ; 
esse . Próximo botão . addEventListener ( ' clique' , isto.onButtonClick.bind ( isto ) ) ;

 if ( este . sliderCounter ) { 
esse . sliderButtonPrev . addEventListener ( ' clique' , isto.onButtonClick.bind ( este ) ) ; 
esse . sliderButtonNext . addEventListener ( ' clique' , isto.onButtonClick.bind ( este ) ) ; 
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 ( 'componente deslizante universal' , UniversalSliderComponent ) ;