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 (",)
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
I bought the code and it does not work correctly, can you correct it please