Adicionar controle deslizante de imagem na página do Shopify

< link rel = "folha de estilo" href = " {{ 'section-main-page.css' | asset_url }} " media = "print" onload = "this.media='all'" > 
< link rel = "stylesheet" href = " {{ 'component-rte.css' | asset_url }} " media = "print" onload = "this.media='all'" >
 
< noscript > { { 'seção-main-page.css' | URL_do_asset | folha de estilo_tag } } < / noscript > 
< noscript > { { 'component-rte.css' | URL_do_asset | folha de estilo_tag } } < / noscript >

 <estilo> _
 . seção - { { seção. id } } - preenchimento { 
preenchimento - topo : { { seção. configurações . preenchimento_top | vezes : 0,75 | redondo : 0 } } px ; 
preenchimento - inferior : { { seção. configurações . preenchimento_bottom | vezes : 0,75 | redondo : 0 } } px ;
 }

 @media screen e ( largura mínima : 750px ) { 
. seção - { { seção. id } } - preenchimento {
 preenchimento - topo : { { seção. configurações . padding_top } } px ; 
preenchimento - inferior : { { seção. configurações . padding_bottom } } px ;
 }
 }

 página - controle deslizante {
 posição : relativa ;
 largura : 50 % ;
 preenchimento : 0 3rem ;
 }
 
página - controle deslizante ul {
 posição : relativa ;
 flex - wrap : herdar ;
 estouro -x : automático ;
 scroll - snap - type : x obrigatório ;
 comportamento de rolagem : suave ;
 - webkit - overflow - rolagem : toque ; 
exibição : flexível ;
 preenchimento - esquerda : 0 ! importante ;
 margem : 0 ; 
scrollbar - color : rgb ( var ( -color - foreground ) ) rgba ( var ( -color - foreground ) , 0,04 ) ;
 -ms - overflow - style : nenhum ;
 largura da barra de rolagem : nenhuma ; 
alinhar - itens : centro ;
 }

 página - controle deslizante ul :: - webkit - barra de rolagem {
 altura : 0,4rem ;
 largura : 0,4rem ;
 Mostrar nenhum ;
 }

 página - controle deslizante li {
 flex - encolher : 0 ; 
largura : 100 % ;
 estilo de lista : nenhum ! importante ;
 exibição : bloco ;
 }

 página - controle deslizante img {
 largura : 100 % ;
 exibição : bloco ;
 margem : 0 ! importante ;
 }
 
. página - controle deslizante - botão - contêiner {
 posição : absoluta ;
 topo : 0 ;
 esquerda : 0 ;
 largura : 100 % ;
 altura : calc ( 100 % - 20px ) ; 
exibição : flexível ;
 justificar - conteúdo : espaço entre ;
 alinhar - itens : centro ;
 índice z : 1 ;
 }

 . página - controle deslizante - botão - botão do contêiner {
 preenchimento : 0,5rem ;
 plano de fundo : nenhum ; 
borda : nenhuma ;
 transição : todos os .3s facilitam ;
 }

 . page - slider -- button - container button : hover {
 escala : 1,3 ;
 }

 . página - controle deslizante - botão - contêiner svg. ícone - esquerda { 
largura : 20px ;
 altura : 20px ;
 proporção de aspecto : 1 ;
 girar : 90 graus ;
 }

 . página - controle deslizante - botão - contêiner svg. ícone - direita {
 largura : 20px ;
 altura : 20px ; 
proporção de aspecto : 1 ;
 gire : - 90 graus ;
 }

 . página - controle deslizante - navegação - contêiner {
 posição : relativa ;
 largura : 100 % ;
 altura : automático ;
 exibição : flexível ; 
justificar - conteúdo : centro ;
 preenchimento - topo : 1rem ;
 }

 . página - controle deslizante - navegação - intervalo do contêiner {
 largura : 10px ;
 proporção de aspecto : 1 ;
 altura : automático ;
 plano de fundo : #b1b1b1; 
margem : 0 0,5rem ;
 raio da borda : 50 % ;
 }

 . página - controle deslizante - navegação - extensão do contêiner. navegação - selecionado {
 fundo : #000;
 }

 . controle deslizante - centro { 
exibição : bloco ;
 margem : automática ;
 }

 Tela @media somente e ( largura máxima : 750px ) {
 . rte div > img {
 largura : 100 % ;
 }

 . página rte - controle deslizante { 
largura : 100 % ;
 }
 }
 < / estilo >
 < div class = "largura da página largura da página--seção estreita- {{ section.id }} -padding" >
 < h1 class = "título da página principal título da página h0" > 
{ { página. título | escapar } }
 < / h1 >
 < div class = "rte" >
 { % líquido 
atribuir page_content = página. conteúdo | substituir : "<p>===page-slider===</p>" , "<page-slider>" | substituir : "<p>===/page-slider===</p>" , "</page-slider>" | substituir : "<p><span>===page-slider===</span></p>" , "<page-slider>" | substituir : "<p><span>===/page-slider===</span></p>" , "</page-slider>" | substituir : "<p><strong>===page-slider===</strong></p>" , "<page-slider>" | substituir : "<p><strong>===/page-slider===</strong></p>" , "</page-slider>" | substituir : "<div style='text-align: left;'>===page-slider===</div>" , "<page-slider>" | substituir : "<div style='text-align: left;'>===/page-slider===</div>" , "</page-slider>" 
% }
 { { Conteúdo da página } }
 < / div >
 < / div >
 <roteiro> _
 classe PageSlider estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . imagens = isto . querySelectorAll ( 'img' )
 esse . elementAtualizações ( ) ;

 esse . controle deslizante = isto . querySelector ( 'ul' ) ; 
esse . sliderItems = este . querySelectorAll ( 'li' )
 esse . próximoButton = isto . querySelector ( 'botão[nome="próximo"]' ) 
esse . prevButton = isto . querySelector ( 'botão[nome="anterior"]' )
 esse . Próximo botão . addEventListener ( ' clique' , este.botãoClicado.bind ( isto ) ) ; 
esse . botão anterior . addEventListener ( ' clique' , este.botãoClicado.bind ( isto ) ) ;
 }

 elementAtualizações ( ) { 
const sliderPosition = this . imagens [ 0 ] . parentElement . estilo . alinhamento de texto ;

 const slider = documento. createElement ( 'ul' ) ;
 esse . anexarCriança ( slider ) ; 
esse . imagens . forEach ( img => {
 const li = documento. criarElemento ( 'li' )
 li. anexar ( img )
 controle deslizante. acrescentar ( li )
 } )
 
botões const = ` < div class = "page-slider--button-container" >
 < nome do botão = "anterior" desabilitado > 
< svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon-left" 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 > 
< nome do botão = "próximo" >
 < svg ária - oculto = "true" focusable = "falso" role = "apresentação" class = "icon-right" 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> ` ; _ _

 deixe nav = "<div class='page-slider--nav-container'>" ;
 for ( deixe i = 0 ; i < this . images . length ; i ++ ) { 
nav + = ` < span data - index = '${i}' >< / span > ` ;
 }
 navegação + = "</div>" ;
 esse . innerHTML + = botões ; 
esse . innerHTML + = navegação ;
 esse . querySelectorAll ( 'span' ) [ 0 ] . lista de classes . add ( 'nav-selecionado' ) ;
 
esse . querySelectorAll ( 'p' ) . forEach ( par => {
 esse . removerChild ( par )
 } )

 esse . querySelectorAll ( 'div' ) . forEach ( caixa => { 
if ( box. innerHTML === '' ) isso . removerChild ( caixa )
 } )
 
sliderPosition == 'centro' ? esse . lista de classes . add ( 'slider-center' ) : this . estilo . float = posição do slider
 }

 botãoClicado ( e ) {
 e. preventDefault ( ) ; 
e. atualTarget . nome == 'próximo' ? console. log ( 'próximo' ) : console. log ( por exemplo, currentTarget . nome )
 
esse . slideScrollPosition = e. atualTarget . nome === 'próximo' ? esse . controle deslizante . scrollLeft + this . sliderItems [ 0 ] . clientWidth : este . controle deslizante . scrollLeft - isto . sliderItems [ 0 ] . largura do cliente ; 
esse . controle deslizante . scrollTo ( {
 esquerda : isto . slideScrollPosition
 } ) ;

 const slideNum = isto . slideScrollPosition / this . sliderItems [ 0 ] . largura do cliente 
slideNum < 1 ? esse . botão anterior . desativado = verdadeiro : isto . botão anterior . desativado = falso 
slideNum == isto . sliderItems . comprimento - 1 ? esse . Próximo botão . desativado = verdadeiro : isto . Próximo botão . desativado = falso ;
 
esse . querySelectorAll ( 'span' ) . forEach ( num => num. classList.remove ( ' nav-selected' ) ) 
esse . querySelectorAll ( 'span' ) [ slideNum ] . lista de classes . add ( 'nav-selecionado' )
 }

 }

 elementos personalizados. define ( 'page-slider' , PageSlider ) ;
 < / roteiro > 
{ % esquema % }
 {
 "nome" : "t:seções.página principal.nome" ,
 "tag" : "seção" ,
 "classe" : "seção" ,
 "configurações" : [
 {
 "tipo" : "cabeçalho" , 
"content" : "t:sections.all.padding.section_padding_heading"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 ,
 "Passo 4 ,
 "unidade" : "px" , 
"label" : "t:sections.all.padding.padding_top" ,
 "padrão" : 36
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 ,
 "máximo" : 100 ,
 "Passo 4 , 
"unidade" : "px" ,
 "label" : "t:sections.all.padding.padding_bottom" ,
 "padrão" : 36
 }
 ] ,
 "blocos" : [
 {
 "nome" : "controle deslizante" ,
 "tipo" : "controle deslizante"
 }
 ]
 } 
{ % termina o esquema % }