collection list slider shopify

Adicionar controle deslizante de lista de coleção - Temas do Shopify

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

Compatibilidade: Compatível com todos os temas GRATUITOS do Shopify 2.0 . Atualizado para a versão mais recente 12.0

Mostre todas as suas coleções usando um controle deslizante. Este é um controle deslizante para as coleções e NÃO para os produtos. Para controle deslizante do produto, consulte aqui

Confira a loja DEMO aqui 💻 . Senha: made4uo

O que você está comprando:

  • Um controle deslizante para lista de coleções
  • Opções para alterar o fundo do cartão e a borda ativa
  • Opção para definir quantos itens para desktop, tablet e celular
  • Opção incluída para definir a largura máxima da seção
  • Adicionada uma opção para ocultar o título da coleção
  • Opção para mostrar o contador como pontos, controle deslizante e número
  • Adicionada uma opção para mostrar o botão na lateral

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância

Para iniciar:

1. Vá para loja Admin Shopify > Temas > Ações > Editar código

2. Na pasta Seção, crie uma nova seção, nomeie-a como quiser e substitua o código padrão pelo código abaixo.

 { { 'lista de coleção-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 = "collectionListSlider {% if section.settings.hide_title %} título da coleção--oculto {% endif %} "
 estilo = " 
preenchimento superior: {{ section.settings.padding_top | append: " px " }} ;
 preenchimento inferior: {{section.settings.padding_bottom | append: " px " }} ;
 largura máxima: {{ section.settings.section_width | append: " px " }}
 "
 >
 < 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 {{ section.settings.heading_size }} " > { { seção. configurações . título | escapar } } </ h2 >
 { % fim se % } 
{ % se seção. configurações . mostrar_view_all % }
 < a href = "/collections" class = "button btn" > Ver tudo </ a >
 { % fim se % }
 </div> _ _ 
< universal - controle deslizante - estilo do componente = "--border-color: {{section.settings.border_color}} ;" >
 < 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 = " {{ 'sections.slideshow.previous_slideshow' | t }} "
 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 > 
< ul class = "controle deslizante de grade de produto - controle deslizante de tablet - em todos os lugares " 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 %} {% if forloop.first %} imagem--active {% endif %} "
 { { bloquear. shopify_atributos } }
 style = "--desktop-items: {{ section.settings.desktop_items }} ;--tablet-items: {{ section.settings.tablet_items }} ; --mobile-items: {{ section.settings.mobile_items }} " 
>
 { % 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 = "embrulho de cartão" >
 < div 
class = "cartão cartão-- {{ settings.card_style }} {% if card_collection.featured_image %} card--media {% else %} card--text {% endif %} {% if settings.card_style == 'card' %} color- {{ settings.card_color_scheme }} {% endif %} {% if extend_height %} card--extend-height {% endif %} {% if card_collection.featured_image == nil and settings.card_style == 'card' %} proporção {% if card_collection.featured_image == nil and settings.card_style == 'card' %} {% endif %} " 
style = "--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }} %;"
 >
 < um
 href = " {{ card_collection.url }} "
 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 -% } 
</a> _

 { % se configurações. card_style == 'cartão' ou card_collection. imagem em destaque % }
 < div class = "cartão__content" > 
< div class = "cartão__informações" >
 < h4 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 - } }
 { %- outro -% } 
{ { 'onboarding.collection_title' | } }
 { %- fim se -% }
 </a> _
 </ h4 > 
{ %- 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 - } }
 </ 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> _

 < 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 = " {{ 'sections.slideshow.next_slideshow' | t }} "
 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> _ _
 
{ %- se comprimento_do_bloco > 3 -% }
 < div class = "sliderContainer {% unless section.settings.slider_visual == " slider " %} oculto {% endunless %} " > 
< input type = "range" min = "0" max = " {{block_length | minus: 1 }} " value = "0" 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 >


 < div 
class = "slideshow__controls slider-buttons no-js-hidden {% if section.settings.slider_visual == 'slider' or section.settings.slider_visual == 'hide' %} oculto {% endif %} "
 estilo = "display: flex; borda: nenhum"
 >
 < 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 }} "
 > 
< 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" > 
{ { comprimento_do_bloco } }
 </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 sliderCounterLink {% if forloop.first %} slider-counter__link--active {% endif %} "
 dados - ponto = " {{forloop.index0}} "
 estilo = "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 }} "
 > 
< 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 = " {{ '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 coleções" ,
 "tag" : "seção" , 
"class" : "seção espaçada" ,
 "configurações" : [
 {
 "tipo" : "intervalo" ,
 "id" : "seção_largura" ,
 "min" : 900 ,
 "máx" : 2100 , 
"passo" : 100 ,
 "padrão" : 1200 ,
 "unidade" : "px" ,
 "label" : "Largura máxima da seção"
 } ,
 {
 "tipo" : "texto" , 
"id" : "título" ,
 "default" : "Coleções" ,
 "rótulo" : "Título"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "heading_size" , 
"opções" : [
 {
 "valor" : "h2" ,
 "rótulo" : "Pequeno"
 } ,
 {
 "valor" : "h1" ,
 "rótulo" : "Médio"
 } , 
{
 "valor" : "h0" ,
 "rótulo" : "Grande"
 }
 ] ,
 "padrão" : "h1" ,
 "label" : "Tamanho do título" ,
 "info" : "Aplicável apenas às versões mais recentes dos temas gratuitos do Shopify 2.0" 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_view_all" ,
 "padrão" : verdadeiro ,
 "label" : "Botão Ver tudo"
 } ,
 { 
"tipo" : "caixa de seleção" ,
 "id" : "hide_title" ,
 "padrão" : falso ,
 "label" : "Ocultar títulos de coleções"
 } ,
 {
 "tipo" : "cabeçalho" , 
"content" : "Configurações responsivas"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "desktop_items" ,
 "min" : 1 ,
 "máximo" : 8 , 
" passo 1 ,
 "padrão" : 4 ,
 "unidade" : "#" ,
 "label" : "Número de coleções no desktop"
 } ,
 {
 "tipo" : "intervalo" , 
"id" : "tablet_items" ,
 "min" : 1 ,
 "máximo" : 8 ,
 " passo 1 ,
 "padrão" : 3 ,
 "unidade" : "#" , 
"label" : "Número de coleções no tablet"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "mobile_items" ,
 "min" : 1 ,
 "máximo" : 5 , 
" passo 1 ,
 "padrão" : 2 ,
 "unidade" : "#" ,
 "label" : "Número de coleções no celular"
 } ,
 {
 "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" : "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"
 } ,
 {
 "valor" : "ocultar" ,
 "rótulo" : "ocultar"
 }
 ] , 
"padrão" : "números" ,
 "rótulo" : "Contador" ,
 "info" : "Aplica-se apenas em dispositivos móveis"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "slider_button_fixed" , 
"padrão" : verdadeiro ,
 "label" : "Mostrar botão deslizante na lateral"
 }
 ] ,
 "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 % } 


3. Em seguida, abra a pasta Ativos e "crie um novo ativo". Crie um novo arquivo CSS e nomeie-o como "collection-list-slider" e coloque o código abaixo.

 . coleçãoListSlider . cartão . meios de comunicação ,
 . coleçãoListSlider . contêiner de slides , 
componente deslizante universal. cartão__media {
 largura : 100 %;
 }
 . coleçãoListSlider . slideshow__control - wrapper. controle deslizante {
 exibição : flexível ;
 alinhar - itens : centro ;
 } 
. título da coleção - oculto. cartão__content {
 opacidade : 0 ;
 altura : 0 ;
 }
 . coleçãoListTitleWrapper {
 exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 preenchimento : 1rem ;
 } 
. coleçãoListSlider : pairar. sliderCounterBtn -- anterior ,
 . sliderCounterBtn -- anterior {
 esquerda : 0 ;
 }
 . coleçãoListSlider : pairar. sliderCounterBtn - próximo ,
 . sliderCounterBtn -- próximo { 
direita : 0 ;
 }
 . cartão - cartão. card__heading a :: depois ,
 . cartão - padrão. cartão - texto a :: depois ,
 . card__heading a :: depois de {
 inferior : 0 ; 
esquerda : 0 ;
 direita : 0 ;
 topo : 0 ;
 }
 . cartão ,
 . cartão - informações ,
 . coleçãoListSlider . cartão__cabeçalho {
 alinhamento de texto : centro ;
 } 
. coleçãoListSlider {
 estouro : oculto ;
 margem : 0 automático ;
 }
 . coleçãoListSlider ul. produto - grade. controle deslizante . controle deslizante -- tablet {
 exibição : flexível ;
 }
 . coleçãoListSlider universal - controle deslizante - componente { 
posição : relativa ;
 exibição : bloco ;
 }
 . coleçãoListSlider . cartão__informações {
 preenchimento inferior : 10px ;
 preenchimento - topo : 10px ;
 }
 . coleçãoListSlider . coleçãoListTitle {
 margem : automático 0 ; 
}
 . coleçãoListSlider . destaque - grade {
 exibição : flexível ;
 preenchimento : 0 ;
 }
 . coleçãoListSlider . destaque - grade li ,
 . 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 : 0 0 1rem ;
 largura : 100 %;
 preenchimento - esquerda : 0 ;
 } 
. coleçãoListSlider . coleção - lista__item {
 largura : calc ( 100 % / var ( -desktop - items ) ) ;
 preenchimento : calc ( 0,5vw + 5px ) ;
 } 
. coleçãoListSlider . slider__slide {
 preenchimento : 0 1rem ;
 }
 . coleçãoListSlider . 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 ;
 }
 . 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 ;
 }
 . coleçãoListSlider . controle deslizante - contador - pontos ,
 . coleçãoListSlider . controle deslizante - contador - números {
 margem : 0 ;
 }
 . coleçãoListSlider 
. controle deslizante - contador__link - ativo. controle deslizante - contador__link - pontos
 . ponto {
 cor de fundo : rgba ( 0 , 0 , 0 ) ;
 }
 . 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 : pairar ,
 . sliderCounterButton : pairar { 
transformar : escala ( 1.1 ) ;
 }
 . coleçãoListSlider . controle deslizante - counter__link -- números {
 cor : rgba ( 0 , 0 , 0 , 0,5 ) ; 
decoração de texto : nenhuma ;
 }
 . coleçãoListSlider . slider - counter__link -- números : pairar ,
 . botão deslizante : não ( [ desativado ] ) : hover {
 cor : #000;
 }
 . coleçãoListSlider 
. controle deslizante - contador__link - ativo. controle deslizante - counter__link -- números {
 decoração de texto : sublinhado ;
 cor : #000;
 }
 . coleçãoListSlider . controle deslizante - botões {
 exibição : flexível ;
 alinhar - itens : centro ; 
justificar - conteúdo : centro ;
 posição : relativa ;
 }
 . coleçãoListSlider . controle deslizante - botão {
 cor : rgba ( 0 , 0 , 0 , 0,75 ) ; 
fundo : 0 0 ;
 borda : nenhuma ;
 cursor : ponteiro ;
 largura : 44px ;
 altura : 44px ;
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 } 
. botão deslizante . ícone {
 altura : 0,6rem ;
 }
 . botão deslizante [ desabilitado ] . ícone {
 cor : rgba ( 0 , 0 , 0 , 0,3 ) ; 
cursor : não permitido ;
 }
 . botão deslizante  próximo . ícone {
 transformar : girar ( -90 graus ) ;
 }
 . botão deslizante - anterior. ícone , 
. sliderCounterBtn -- anterior > svg {
 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 ;
 }
 . coleçãoListSlider . apresentação de slides__control - wrapper {
 estouro -x : automático ;
 }
 . imagem -- ativa {
 borda : 5px var sólido ( -border - color ) ;
 } 
. coleçãoListSlider . cartão - cartão. cartão - mídia. cartão__inner . cartão__informações ,
 . coleçãoListSlider . cartão - cartão. cartão -- mídia > . cartão__content . cartão__crachá , 
. coleçãoListSlider . cartão - cartão. cartão - texto. cartão__interior ,
 . coleçãoListSlider
 . cartão - padrão. cartão - texto. artigo - cartão
 > . cartão__content
 . cartão__informações ,
 . coleçãoListSlider 
. cartão - padrão. cartão - texto
 > . cartão__content
 . card__heading ,
 . coleçãoListSlider . cartão - padrão > . cartão__content . cartão__crachá ,
 . coleçãoListSlider . cartão - padrão > . cartão__content . cartão__caption , 
. coleçãoListSlider . contador -- celular {
 Mostrar nenhum ;
 }
 . 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 ;
 }
 . coleçãoListSlider . sliderContador {
 -webkit -aparência : nenhum ;
 largura : 100 %;
 altura : 5px ;
 preenchimento : 0 ; 
raio da borda : 10px ;
 plano de fundo : #d3d3d3;
 contorno : 0 ;
 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 : #000;
 cursor : ponteiro ;
 }
 . sliderCounter ::- moz - range - polegar {
 altura : 5px ;
 margem : 10px 0 ;
 raio da borda : 5px ;
 fundo : #000;
 cursor : ponteiro ;
 } 
. cartão - estender - altura ,
 . card__inner : não ( . ratio ) > . cartão__content ,
 . coleçãoListSlider . cartão -- cartão {
 altura : 100 %;
 }
 . sliderCounterBox { 
exibição : flexível ;
 alinhar - itens : centro ;
 }
 . sliderCounterButton {
 Mostrar nenhum ;
 posição : absoluta ;
 plano de fundo : #000 !importante;
 cor : #fff !importante;
 transição : 0,2s ;
 índice z : 5 ; 
}
 . slider_button_fixed . sliderCounterBtn -- anterior {
 esquerda : - 100 %;
 }
 . slider_button_fixed . sliderCounterBtn -- próximo {
 certo : - 100 %;
 }
 . sliderCounterBtn -- próximo > svg { 
transformar : girar ( -90 graus ) ;
 }
 . sliderCounterButton > svg {
 altura : 2rem ! importante ;
 }
 . cartão {
 decoração de texto : nenhuma ;
 }
 . coleçãoListSlider . cartão - cartão , 
. coleçãoListSlider . cartão - padrão. cartão__inner {
 posição : relativa ;
 dimensionamento da caixa : caixa de borda ;
 }
 . coleçãoListSlider . cartão - cartão : depois , 
. coleçãoListSlider . cartão - padrão. card__inner : depois de {
 contente : "" ;
 posição : absoluta ;
 z - índice : -1 ;
 }
 . coleçãoListSlider . cartão__inner . cartão__media { 
estouro : oculto ;
 índice z : 0 ;
 borda - inferior - direita - raio : 0 ;
 borda - inferior - esquerda - raio : 0 ;
 }
 . cartão - padrão. cartão -- texto { 
cor de fundo : transparente ;
 }
 . coleçãoListSlider . cartão . meios de comunicação ,
 . coleçãoListSlider . cartão__media {
 inferior : 0 ;
 posição : absoluta ;
 topo : 0 ;
 }
 . cartão__media { 
margem : 0 ;
 largura : calc ( 100 % -2 * 0rem ) ;
 }
 . coleçãoListSlider . cartão__inner {
 estouro : oculto ;
 posição : relativa ; 
proporção de aspecto : 1 ;
 }
 . coleçãoListSlider . cartão__inner . cartão__content {
 preenchimento : 1rem ;
 posição : relativa ;
 }
 . cartão__content {
 exibição : grade ; 
grid - template - rows : minmax ( 0 , 1fr ) max - content minmax ( 0 , 1fr ) ;
 preenchimento : 10px ;
 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 ;
 } 
. 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 %;
 }
 . cartão - cartão. cartão -- mídia > . cartão__content ,
 . cartão__cabeçalho {
 margem - topo : 0 ;
 } 
. card__heading : último - filho {
 margem - inferior : 0 ;
 }
 . card__heading a :: depois de {
 contente : "" ;
 posição : absoluta ;
 í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 - background ) ) , 
0 0 0,5rem 0,4rem rgba ( 0 , 0 , 0 , 0,3 ) ;
 contorno : rgba ( 0 , 0 , 0 , 0,5 ) sólido 0,2rem ;
 } 
. card__heading a : foco - visível : depois de {
 box - shadow : 0 0 0 0,3rem rgb ( var ( -color - background ) ) , 
0 0 0,5rem 0,4rem rgba ( 0 , 0 , 0 , 0,3 ) ;
 contorno : rgba ( 0 , 0 , 0 , 0,5 ) sólido 0,2rem ;
 } 
. card__heading a : foco ,
 . card__heading a : foco : não ( : foco - visível ) : depois de {
 box - shadow : nenhum ;
 contorno : 0 ;
 }
 . card__information : passe o mouse sobre { 
decoração de texto : sublinhado ;
 texto - sublinhado - deslocamento : 2px ;
 }
 . cartão__informações : pairar {
 transformar : escala ( 1,05 ) ;
 }
 . cartão - padrão > . cartão__content { 
preenchimento : 0 ;
 }
 . cartão - estender - altura. cartão - mídia ,
 . cartão - estender - altura. cartão - padrão. cartão -- texto {
 exibição : flexível ;
 flex - direction : coluna ; 
}
 . cartão - estender - altura. cartão - mídia. cartão__interior ,
 . cartão - estender - altura. cartão - padrão. cartão - texto. cartão__inner {
 flex - crescer : 1 ;
 } 
. cartão . ícone - embrulhar {
 margem - esquerda : 0,8rem ;
 espaço em branco : nowrap ;
 transição : transformação 0,2s ;
 estouro : oculto ;
 }
 . cartão - informações > * + * { 
margem superior : 0,5rem ;
 }
 . cartão - informações {
 largura : 100 %;
 }
 . cartão - informações > * {
 cor : #000;
 }
 . cartão - informações > . preço { 
cor : rgba ( 0 , 0 , 0 ) ;
 }
 . cartão - informações > . avaliação {
 margem superior : 0,4rem ;
 } 
. informações do cartão > : 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 ;
 }
 . coleção - vazia. título - wrapper {
 margem - topo : 10rem ;
 margem inferior : 15rem ; 
}
 . proporção :: antes de {
 contente : "" ;
 largura : 0 ;
 altura : 0 ;
 padding - bottom : var ( -proporção - porcentagem ) ;
 }
 . escondido { 
Mostrar nenhum ! importante ;
 }
 . coleçãoListSlider . cartão__content {
 margem : automática ;
 }
 @media screen e ( largura mínima : 750px ) {
 . coleçãoListSlider {
 preenchimento : 0 5rem ;
 }
 } 
@media screen e ( largura máxima : 750px ) {
 . coleçãoListSlider . coleção - lista__item {
 largura : calc ( 100 % / var ( -table - items ) ) ;
 }
 } 
@media screen e ( largura máxima : 481px ) {
 . coleçãoListSlider . coleção - lista__item {
 largura : calc ( 100 % / var ( -mobile - items ) ) ;
 }
 } 



4. Ainda na pasta Asset, abra global.js ou theme.js e adicione o código abaixo.

 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 . sliderControlLinksArray = Array. de ( este.querySelectorAll ( '.sliderCounterLink ' ) ) ; 
esse . sliderControlLinksArray . forEach ( link => link. addEventListener ( 'clique' , este . linkToSlide . vincular ( este ) ) )) ; 
esse . botão anterior . addEventListener ( ' clique ' , isto.onButtonClick.bind ( isto ) ) ; 
esse . Próximo botão . addEventListener ( ' clique ' , isto.onButtonClick.bind ( 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" ,
 embutido : "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 ) ;

5. Certifique-se de SALVAR.

É isso (",)

Copied!
Voltar para o blogue

2 comentários

What seems to be the problem. If you cannot see the code, please follow the steps mentioned above. You can also contact me at chat with us

Made4uo

I bought the code and it does not work correctly, can you correct it please

Guillermo

Deixe um comentário