Apresentação de slides com 11 designs exclusivos

15 de outubro de 2021

Compatibilidade: Compatível com a maioria dos temas do Shopify, do Debut ao Shopify 3.0.

Crie uma apresentação de slides sem necessidade de aplicativo, assinatura e experiência em codificação.

Eu sei que a maioria dos temas do Shopify tem uma espécie de apresentação de slides, mas não estamos criando apenas uma espécie de apresentação de slides. A apresentação de slides tem um total de 11 estilos diferentes que você pode aplicar (não contei o design 2, pois é apenas o oposto do design 1). Está tendo problemas com imagens muito claras ou muito escuras? Eu adicionei filtros. Eu recomendo brincar com os filtros.

Além disso, adicionei um vídeo que você pode enviar do seu disco rígido ou do YouTube.

Isso funciona com o tema Debut e Dawn com certeza, mas como escrevi o código com nomes de classe exclusivos e com código rígido (o que significa que não pode ser facilmente alterado), isso deve funcionar na maioria dos temas do shopify.

Apenas para informar, componentes complexos vêm com códigos longos. Tentei encurtar o código o máximo que pude.

Confira a loja DEMO aqui 💻 . Senha: made4uo

NOTA: Lembre-se de usar imagens de paisagem tanto quanto possível ou usar os designs 1 e 2 para imagens de retrato para evitar que as imagens sejam cortadas. As imagens devem ter os mesmos tamanhos possíveis.

O que você está comprando:

11 designs de slides diferentes
Adicionados filtros para facilitar o ajuste das imagens
Use vídeos no slide

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 sua loja online > Temas > Ações > Editar código

2. Vá para a pasta Seção e crie uma seção, vamos chamá-la de "apresentação de slides personalizada"

3. Na nova seção, cole o código abaixo e clique em SALVAR

{ { 'apresentação de slides personalizada.css' | URL_do_asset | folha_de_estilo } } 
< div class = "slideShow" id = "seção- {{section.id}} " >
 < customizado - dados da apresentação de slides - autoplay = " {{section.settings.autoplay}} "
 dados - intervalo = " {{section.settings.interval | times: 1000 }} " 
id = "apresentação de slides personalizada-- {{section.id}} " >
 < ul class = "slideshowContainer {% if section.settings.full-width == true %} fullWidth {% endif %} " >
 { % para bloco na seção. blocos % } 
< li class = "slideWrapper {{block.settings.design}} " id = "slide- {{forloop.index0}} "
 estilo = "plano de fundo: {{block.settings.bg_color}} " >
 { % se bloco. configurações . projeto == 'design12' % } 
{ % se bloco. configurações . vídeo_interno contém "youtu" % }
 < div class = "slideVideoExternalWrapper" >
 < iframe class = "slideVideoExternal" frameborder = "0" permitir = "autoplay" 
src = "//www.youtube.com/embed/ {{block.settings.internal_video | remove: " https : //youtu.be/"}} ?mute=1&autoplay=1"></iframe>
 < / div >
 { % outro % }
 < video class = "slideVideoInternal" controles silenciados de reprodução automática > 
< fonte src = " {{block.settings.internal_video | remove: " https : "}} " type = "video/mp4" >
 Seu navegador não é compatível para reproduzir o vídeo !
 < / vídeo >
 { % fim se % }
 { % outro % } 
{ % atribuir img_url = bloco. configurações . imagem_slide % }
 < img class = "slideImage"
 src = " {{img_url | img_url: master}} "
 srcset = " {% case img_url.width %}
 {% when >= 375 %} {{ img_url | img_url: '375x' }} 375w,
 {% when >= 750 %} {{ img_url | img_url: '750x' }} 750w, 
{% when >= 1100 %} {{ img_url | img_url: '1100x' }} 1100w,
 {% when >= 1500 %} {{ img_url | img_url: '1500x' }} 1500w,
 {% when >= 1780 %} {{ img_url | img_url: '1780x' }} 1780w,
 {% when >= 2000 %} {{ img_url | img_url: '2000x' }} 2000w,
 {% when >= 3000 %} {{ img_url | img_url: '3000x' }} 3000w,
 {% when >= 3840 %} {{ img_url | img_url: '3840x' }} 3840w,
 {% else %} {{ img_url | img_url: 'master' }} w,
 {% endcase %} "
 carregando = "preguiçoso" 
alt = " {{ img_url.alt | escape }} "
 style = "filtro: {{block.settings.image_filter}} ; " >
 { % fim se % }
 < div class = "descriptionContainer {{block.settings.description_placement}} " > 
{ % se bloco. configurações . distintivo ! = em branco % } < h1 class = "badgeTitle" style = "background: {{block.settings.badge_color}} " > { { bloco. configurações . emblema } } < / h1 > { % endif % } 
{ % se bloco. configurações . título ! = blank % } < h3 class = "slideTitle" style = "color: {{block.settings.font_color}} " > { { block. configurações . título } } < / h3 > { % endif % } 
{ % se bloco. configurações . legenda ! = em branco % } < h4 class = "slideSubtitle" style = "color: {{block.settings.font_color}} " > { { block. configurações . legenda } } < / h4 > { % endif % } 
{ % se bloco. configurações . Botão de link ! = em branco % }
 <a href = "{{block.settings.button_link}}" > _ {{block.settings.button_link}} _ 
< button id = "slideBtn" class = "slideBtn slideBtn-- {{block.id}} " style = "background: {{block.settings.cta_color}} ; cor: {{block.settings.cta_font_color}} " > { { bloquear. configurações . rótulo_botão | escapar } } < / botão > 
<estilo> _
 . slideBtn -- { { bloco. id } } : pairar {
 plano de fundo : { { bloco. configurações . cta_hover_color } } ! importante ; 
cor : { { bloco. configurações . cta_color } } ! importante ;
 }
 . slideBtn -- { { bloco. id } } : pairar :: depois de { 
borda : sólido { { bloco. configurações . cta_color } } 0px ;
 }
 . slideBtn -- { { bloco. id } } :: depois de { 
borda : sólido { { bloco. configurações . cta_color } } 40px ;
 }
 < / estilo >
 < / a >
 { % fim se % }
 < / div > 
{ % se bloco. configurações . projeto == 'design11' % }
 < div class = "panelSlide painel-- {{block.id}} " >
 <estilo> _ 
. painel -- { { bloco. identificação } } > * {
 plano de fundo : { { bloco. configurações . bg_color_11 } } ;;
 }
 < / estilo > 
< span >< / span > < span >< / span >< span >< / span >< span >< / span >< span >< / span >< span >< / span >< span >< / span >< intervalo >< / intervalo > 
< / div >
 { % fim se % }
 < / li >
 { % fim para % }
 { % se seção. configurações . mostrar_controles % } 
< div class = "controlContainer" >
 < div class = "btnContainer" >
 < span type = "botão" class = "controlBtn prevBtn" id = "prevBtn" >< / span > 
< ul class = "slideDotContainer" >
 { %- para bloco na seção. blocos -% } 
< li class = "slideDots {% if forloop.first %} activeDot {% endif %} " data - dot - id = " {{forloop.index0}} " >< / li >
 { % fim para % }
 < / ul > 
< span type = "button" class = "controlBtn nextBtn" id = "nextBtn" >< / span >
 < / div > 
< div type = "button" class = "pauseContainer oculto" id = "pauseBtnContainer" >
 < span class = "pauseBtn" >< / span > 
< span class = "playBtn" > < / span >
 < / div >
 < / div >
 { % fim se % }
 < / ul > 
< / personalizado - apresentação de slides >
 < / div >
 { % Comente % }
 Esteja atento ao requisito de duração da animação. A duração não deve ser inferior ao requisito se você estiver usando o design :
 . projeto1 : 1s ; 
. projeto2 : 1s ;
 . projeto3 : 2s ;
 . projeto4 : 3s ;
 . projeto5 : 3s ;
 . projeto6 : 3s ;
 . projeto7 : 3s ;
 . projeto8 : 1s ;
 . projeto9 : 1s ; 
. projeto10 : 4s ;
 . projeto11 : 3s ;
 { % comentário final % }
 <estilo> _
 #apresentação de slides personalizada-- {{section.id}} { 
-- botão - cor : { { seção. configurações . cor_controle } } ;
 --control -hover -color : { { seção. configurações . control_hover_color } } ; 
--botão - bg - color : rgba ( { { seção.configurações.control_color } } , 0,5 ) ;
 --botão - bg - hover - color : transparente ; 
– botão – dark - bg - color : rgba ( 0 , 0 , 0 , .7 ) ;
 }

 : é ( . design1 , . design2 ) {
 animação : opacidade Escala 1s ! importante ;
 } 
. projeto1 . slideImagem {
 preenchimento - esquerda : 50 % ;
 plano de fundo : var ( -cinza - bg - color ) ;
 }
 . projeto1 . descriçãoContainer {
 preenchimento - direita : 55 % ; 
}
 : é ( .design1 , .design2 ) . descriçãoContainer . slideTitle {
 color : var ( -black - font - color ) ! importante ;
 } 
: é ( .design1 , .design2 ) . descriçãoContainer . slideSubtítulo {
 color : var ( -black - font - color ) ! importante ;
 }
 . projeto2 . slideImagem { 
preenchimento - direita : 50 % ;
 plano de fundo : var ( -cinza - bg - color ) ;
 }
 . projeto2 . descriçãoContainer {
 preenchimento - esquerda : 55 % ; 
cor : var ( -black - bg - color ) ;
 }
 @keyframes opacityScale {
 0 % { transformação : escala ( .8 ) ; opacidade : 0 ; } 
100 % { transformação : escala ( 1 ) ; opacidade : 1 ; }
 }
 . projeto3 . slideImagem {
 animação : opacityScale 1s ;
 }
 . projeto3 . emblemaTítulo { 
margem : 0px 0px 10px 40px ! importante ;
 }
 : é ( .design3 , .design8 ) . slideTitle {
 cor : var ( -black - font - color ) ;
 } 
: é ( .design3 , .design8 ) . slideSubtítulo {
 cor : var ( -black - font - color ) ;
 }
 . projeto3 . slideTitle {
 largura : ajuste - conteúdo ; 
preenchimento : 2 % ;
 cor de fundo : rgba ( 255 , 255 , 255 , 0,3 ) ;
 margem inferior : 20px ! importante ;
 animação : até 1s ; 
transformar : traduzirY ( 0px ) inclinação ( -10deg ) ;
 transição : todos os 1s facilitam ;
 }
 @quadros-chave ativados {
 0 % { transform : translateY ( 50px ) ; opacidade : 0 ; } 
50 % { transform : translateY ( -5px ) ; }
 100 % { transform : translateY ( 0px ) ; opacidade : 1 ; }
 }
 . projeto3 . slideSubtítulo { 
preenchimento : 1,5 % ;
 largura : ajuste - conteúdo ;
 margem : - 25px 0px 0px 30px ! importante ;
 cor de fundo : rgba ( 255 , 255 , 255 , 0,7 ) ; 
margem inferior : 20px ! importante ;
 animação : até 2s ;
 transformar : traduzirY ( 0px ) inclinação ( -10deg ) ;
 transição : todos os 2s facilitam ;
 }
 . projeto3 . slideBtn {
 animação : até 1,5s linear ; 
transformar : traduzirY ( 0px ) ;
 margem esquerda : 30px ;
 }
 . projeto4 . slideImagem {
 animação : traduzirX 1s ;
 }
 @keyframes slide - esquerda { 
0 % { largura : 0 ; opacidade : 0 ; }
 100 % { largura : 100 % ; opacidade : 1 ; }
 }
 . projeto4 . descriçãoContainer { 
largura : 100 % ;
 animação : traduzirX 3s ;
 }
 . projeto5 . slideImagem {
 animação : esquerda - cima - para - baixo - direita 1,5s ;
 }
 @quadros-chave da esquerda - de cima para baixo - à direita { 
0 % { transformação : tradução ( -100 % , -100 % ) ; }
 100 % { transformação : tradução ( 0,0 % ) ; } 
}
 . projeto5 . descriçãoContainer {
 animação : traduzirX 3s ;
 }
 @keyframes girarY {
 0 % { transformação : rotacioneY ( 180deg ) ; opacidade : 0 ; } 
100 % { transformação : rotacionarY ( 0deg ) ; opacidade : 1 ; }
 }
 @keyframes traduzirX { 
0 % { transform : translateX ( 100 % ) ; opacidade : 0 ; }
 80 % { transform : translateX ( -2 % ) ; } 
100 % { transform : translateX ( 0 ) ; opacidade : 1 ; }
 }
 . projeto6 . slideImagem {
 animação : escalaRotate 3s facilidade ;
 }
 . projeto6 . descriçãoContainer { 
animação : escalaRotate 2s facilidade ;
 direção da animação : reversa ;
 }
 @keyframes escalaRotate {
 0 % { transformar : escala ( 0 ) girar ( 360 graus ) ; opacidade : 0 ; } 
80 % { transformação : escala ( 1.1 ) ; }
 100 % { transformar : escala ( 1 ) girar ( 0 graus ) opacidade : 1 ; }
 } 
. projeto7 . descriptionContainer :: depois de {
 contente : '' ;
 posição : absoluta ;
 largura : 150 % ;
 altura : 150 % ;
 topo : 50 % ; 
esquerda : 50 % ;
 transformar : traduzir ( -50 % , -50 % ) ;
 fundo : transparente ;
 raio da borda : 50 % ;
 animação : crescer 3s ;
 } 
@keyframes crescem {
 0 % { borda : branco sólido 300px ; }
 80 % { borda : branco sólido 10px ; }
 100 % { borda : branco sólido 0px ; }
 }
 . projeto8 . slideImagem { 
margem esquerda : 40 % ;
 preenchimento : 40px ;
 largura : 60 % ! importante ;
 cor de fundo : var ( -design8 - bg - color ) ;
 animação : opacityScale 1s ;
 } 
. projeto8 . descriçãoContainer {
 justificar - conteúdo : centro ;
 alinhar - itens : inicial ;
 }
 . projeto9 . slideImagem { 
-webkit - clip - path : polígono ( 60 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % ) ; 
clip - path : polígono ( 60 % 0 , 100 % 0 , 100 % 100 % , 40 % 100 % ) ;
 animação : traduzir - left 1s ;
 estouro : oculto ;
 } 
. projeto9 . descriçãoContainer {
 -webkit - clip - path : polígono ( 0 % 0 % , 60 % 0 , 41 % 100 % , 0 % 100 % ) ; 
clip - path : polígono ( 0 % 0 % , 60 % 0 , 41 % 100 % , 0 % 100 % ) ;
 justificar - conteúdo : centro ! importante ; 
alinhar - itens : inicial ! importante ;
 cor de fundo : var ( -lightblue - bg - color ) ;
 animação : traduzir - right 1s ;
 }
 @keyframes tradução - esquerda { 
0 % { transform : translateX ( 50 % ) ; opacidade : 0 ; }
 100 % { transform : translateX ( 0 % ) opacidade : 1 ; } 
}
 @keyframes tradução - direita {
 0 % { transform : translateX ( -50 % ) ; opacidade : 0 ; } 
100 % { transform : translateX ( 0 % ) opacidade : 1 ; }
 }
 . projeto10 . slideImagem {
 posição : relativa ;
 }
 . projeto10 . descriptionContainer :: antes de { 
contente : '' ;
 largura : 2300px ;
 posição : absoluta ;
 raio da borda : 50 % ;
 topo : 50 % ;
 esquerda : 50 % ; 
transformar : traduzir ( -50 % , -50 % ) ;
 proporção de aspecto : 1 ;
 borda : sólida 0px rgba ( 0 , 0 , 0 , 0,7 ) ;
 animação : moveScope 3s, ocultar 4s ; 
}
 Tela @media somente e ( largura máxima : 600px ) {
 . projeto10 . descriptionContainer :: antes de {
 largura : 2250px ;
 }
 }

 @keyframes moveScope { 
0 % { borda : sólido 1100px rgba ( 0 , 0 , 0 , 0,7 ) ; topo : 37 % ; esquerda : 40 % ; } 
10 % { superior : 37 % ; esquerda : 60 % ; } /* emblema da esquerda para a direita */ 
20 % { superior : 45 % ; esquerda : 18 % ; } /* título da esquerda */ 
50 % { superior : 45 % ; esquerda : 84 % ; } /* título à direita */ 
60 % { superior : 55 % ; esquerda : 39 % ; } /* legenda da esquerda */ 
70 % { superior : 55 % ; esquerda : 62 % ; } /* legenda à direita */ 
80 % { superior : 63 % ; esquerda : 50 % ; } /* botão da esquerda para a direita */ 
90 % { borda : sólido 1100px rgba ( 0 , 0 , 0 , 0,7 ) ; }
 100 % { borda : sólido 0px rgba ( 0 , 0 , 0 , 0,7 ) ; }
 } 
. painelSlide {
 posição : relativa ;
 exibição : grade ;
 grid - template - colunas : repita ( 8 , 1fr ) ;
 altura : 100 % ;
 largura : 100 % ; 
Os 100 melhores % ;
 animação : hideAnimation 0s facilidade - em 3s ;
 modo de preenchimento de animação : avança ;
 }
 . painelSlide > * {
 tamanho do fundo : capa ; 
altura : 100 % ;
 largura : 0 ;
 animação : girarY 3s ;
 }

 @keyframes girarY {
 0 % { transformação : rotacioneY ( 180deg ) ; largura : 100 % ; } 
80 % { transformação : rotacionarY ( 0deg ) ; largura : 100 % }
 100 % { largura : 0 % }
 }

 @keyframes ocultarAnimação {
 para { 
esquerda : - 100 % ;
 }
 }

 . projeto12 . slideVídeoInternal {

 altura : 100 % ;
 largura : 100 % ;
 ajuste ao objeto : capa ;
 } 
. projeto12 . slideVideoExternalWrapper {
 largura : 100 % ;
 altura : automático ;
 preenchimento inferior : 56 % ;
 posição : relativa ;
 }
 . slideVídeoExterno {
 largura : 100 % ; 
altura : 100 % ;
 posição : absoluta ;
 }
 . projeto12 . descriçãoContainer {
 altura : 0 ;
 justificar - conteúdo : flex - start ! importante ;
 alinhar - itens : flex - end ! importante ; 
}
 < / estilo >

 { % esquema % }
 {
 "name" : "Apresentação de slides personalizada" ,
 "tag" : "seção" ,
 "configurações" : [
 {
 "tipo" : "caixa de seleção" , 
"id" : "largura total" ,
 "padrão" : falso ,
 "label" : "Largura total"
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "reprodução automática" ,
 "padrão" : falso ,
 "label" : "reprodução automática"
 } , 
{
 "tipo" : "intervalo" ,
 "id" : "intervalo" ,
 "rótulo" : "intervalo" ,
 "máximo" : 9 ,
 "min" : 1 ,
 "passo 1 ,
 "unidades " , 
"padrão" : 5
 } ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "show_controls" ,
 "padrão" : verdadeiro ,
 "label" : "Mostrar botões de controle"
 } ,
 {
 "tipo" : "cor" , 
"id" : "cor_controle" ,
 "padrão" : "#8f8f8f" ,
 "label" : "Controla a cor"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "control_hover_color" ,
 "default" : "#ffffff" ,
 "label" : "Controla a cor do foco" 
}
 ] ,
 "max_blocos" : 15 ,
 "blocos" : [
 {
 "nome" : "slide" ,
 "tipo" : "deslizar" ,
 "configurações" : [
 {
 "type" : "image_picker" , 
"id" : "imagem_slide" ,
 "label" : "imagem do slide"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "vídeo_interno" ,
 "info" : "Copiar formato de amostra (https://www.example.com). Para o YouTube, precisamos do URL do vídeo. Isso só funciona com design12" ,
 "label" : "url interno ou do vídeo do YouTube" 
} ,
 {
 "tipo" : "texto" ,
 "id" : "crachá" ,
 "rótulo" : "crachá"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "título" ,
 "rótulo" : "título"
 } ,
 { 
"tipo" : "texto" ,
 "id" : "legenda" ,
 "rótulo" : "legenda"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "button_label" ,
 "label" : "rótulo do botão"
 } ,
 { 
"tipo" : "url" ,
 "id" : "botão_link" ,
 "label" : "link do botão"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "bg_color" ,
 "default" : "#DCDCDC" ,
 "label" : "Cor de fundo" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "bg_color_11" ,
 "default" : "#B4CDDE" ,
 "label" : "Cor de fundo para desenho 11" ,
 "info" : "Isso se aplica apenas ao design 11."
 } ,
 {
 "tipo" : "cor" , 
"id" : "badge_color" ,
 "default" : "#FFAE42" ,
 "label" : "Cor do emblema"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "cta_color" ,
 "padrão" : "#ff4500" ,
 "label" : "Cor do botão CTA" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "cta_hover_color" ,
 "padrão" : "#ff4500" ,
 "label" : "Cor do botão de foco do CTA"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "cta_font_color" , 
"default" : "#ffffff" ,
 "label" : "Cor da fonte do CTA"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "cor_da_fonte" ,
 "padrão" : "#000000" ,
 "label" : "Cor da fonte"
 } ,
 { 
"tipo" : "selecionar" ,
 "id" : "projeto" ,
 "padrão" : "design1" ,
 "rótulo" : "design de slides" ,
 "opções" : [
 {
 "valor" : "normal" ,
 "rótulo" : "normal"
 } ,
 { 
"valor" : "design1" ,
 "rótulo" : "design 1"
 } ,
 {
 "valor" : "design2" ,
 "rótulo" : "design 2"
 } ,
 {
 "valor" : "design3" ,
 "rótulo" : "design 3"
 } ,
 { 
"valor" : "design4" ,
 "rótulo" : "design 4"
 } ,
 {
 "valor" : "design5" ,
 "rótulo" : "design 5"
 } ,
 {
 "valor" : "design6" ,
 "rótulo" : "design 6"
 } ,
 { 
"valor" : "design7" ,
 "rótulo" : "design 7"
 } ,
 {
 "valor" : "design8" ,
 "rótulo" : "design 8"
 } ,
 {
 "valor" : "design9" ,
 "rótulo" : "design 9"
 } ,
 { 
"valor" : "design10" ,
 "rótulo" : "design 10"
 } ,
 {
 "valor" : "design11" ,
 "rótulo" : "design 11"
 } ,
 {
 "valor" : "design12" ,
 "rótulo" : "design 12"
 }
 ] 
} , {
 "tipo" : "selecionar" ,
 "id" : "filtro_imagem" ,
 "padrão" : "nenhum" ,
 "label" : "filtro de imagem (não funciona com vídeo)" ,
 "opções" : [
 {
 "valor" : "nenhum" , 
"rótulo" : "normal"
 } ,
 {
 "valor" : "desfoque(4px)" ,
 "rótulo" : "desfoque"
 } ,
 {
 "valor" : "contraste(150%)" ,
 "rótulo" : "contraste"
 } ,
 {
 "valor" : "escala de cinza(90%)" , 
"label" : "tons de cinza"
 } ,
 {
 "value" : "hue-rotate(90deg)" ,
 "rótulo" : "matiz"
 } ,
 {
 "valor" : "brilho(0,4);" ,
 "rótulo" : "brilho"
 } ,
 { 
"valor" : "inverter(75%)" ,
 "rótulo" : "inverter"
 } ,
 {
 "valor" : "opacidade(25%)" ,
 "rótulo" : "opacidade"
 } ,
 {
 "valor" : "saturar(30%)" ,
 "rótulo" : "saturar"
 } ,
 { 
"valor" : "sépia(60%)" ,
 "rótulo" : "sépia"
 }
 ]
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "description_placement" ,
 "default" : "place-center" ,
 "label" : "posicionamento da descrição" , 
"opções" : [
 {
 "valor" : "centro do lugar" ,
 "label" : "centro-centro"
 } ,
 {
 "valor" : "local-centro-esquerda" ,
 "label" : "centro-esquerda"
 } ,
 {
 "valor" : "colocar no canto superior direito" , 
"rótulo" : "canto superior direito"
 } ,
 {
 "valor" : "colocar no canto superior esquerdo" ,
 "rótulo" : "canto superior esquerdo"
 } ,
 {
 "valor" : "colocar-parte inferior direita" ,
 "rótulo" : "canto inferior direito"
 } ,
 { 
"valor" : "local inferior esquerdo" ,
 "rótulo" : "canto inferior esquerdo"
 }
 ]
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Apresentação de slides personalizada nova"
 }
 ]
 } 
{ % termina o esquema % }

Observe que cada design tem uma duração de animação diferente (veja as informações abaixo).

Requisito de duração da animação
.design1: 1s;
.design2: 1s;
.design3: 2s;
.design4: 3s;
.design5: 3s;
.design6: 3s;
.design7: 3s;
.design8: 1s;
.design9: 1s;
.design10: 4s;
.design11: 3s;
.design12: depende da velocidade de reprodução automática

4. Vá para a pasta Ativos, crie uma nova pasta, nomeie-a como " apresentação de slides personalizada "

5. Abra a pasta .css recém-criada e cole o código abaixo e clique em SALVAR

. slideshowContainer {
 largura : 90vw ;
 altura : 50vw ;
 estouro : oculto ; 
margem : 5rem automático ;
 exibição : flexível ;
 posição : relativa ;
 flex - flow : quebra de coluna ;
 alinhar - itens : centro ;
 }
 . largura completa {
 preenchimento : 0 ;
 margem : 0 ; 
largura : 100 % ;
 }
 . slideWrapper {
 margem : automática ;
 exibição : bloco ;
 posição : absoluta ;
 fundo : branco ;
 estouro : oculto ;
 largura : 100 % ; 
altura : 100 % ;
 }
 . slideImagem {
 largura : 100 % ;
 altura : 100 % ;
 exibição : bloco ;
 ajuste ao objeto : capa ;
 posição : relativa ; 
alinhamento vertical : meio ;
 }
 . descriçãoContainer {
 largura : 100 % ;
 altura : 100 % ;
 posição : absoluta ;
 topo : 0 ;
 esquerda : 0 ;
 preenchimento : 30px ; 
exibição : flexível ;
 flex - direction : coluna ;
 }
 . emblemaTítulo {
 cor : herdar ;
 preenchimento : 0 5px ;
 largura : ajuste - conteúdo ; 
cor de fundo : var ( -amarelo - bg - color ) ;
 transformação de texto : maiúscula ;
 margem : 0 ;
 tamanho da fonte : braçadeira ( 10px, 3vw, 45px ) ;
 margem - esquerda : 2px ;
 } 
. slideTitle {
 cor : herdar ;
 display : bloco embutido ;
 margem : 0 ! importante ;
 tamanho da fonte : braçadeira ( 10px, 5vw, 50px ) ;
 altura da linha : 1,1 ;
 }
 . slideSubtítulo { 
cor : herdar ;
 display : bloco embutido ;
 margem : 0 ! importante ;
 tamanho da fonte : braçadeira ( 8px, 2,5vw, 35px ) ;
 altura da linha : 1,1 ;
 }
 . slideBtn { 
display : bloco embutido ;
 raio da borda : 5px ;
 dimensionamento da caixa : caixa de borda ;
 tamanho da fonte : braçadeira ( 10px, 1,5vw, 20px ) ;
 margem superior : 10px ;
 posição : relativa ;
 borda : nenhuma ; 
preenchimento : 5px ;
 cursor : ponteiro ;
 }
 . slideBtn : pairar {
 transformar : escala ( 1.2 ) ;
 transição : todos os 1s facilitam ;
 estouro : oculto ;
 }
 . slideBtn : passar o mouse :: depois de { 
transição : todos os .7s facilitam ;
 opacidade : 1 ;
 visibilidade : visível ;
 }
 . slideBtn :: depois de {
 contente : '' ;
 opacidade : 0,5 ;
 visibilidade : oculta ;
 posição : absoluta ; 
topo : 50 % ;
 esquerda : 50 % ;
 transformar : traduzir ( -50 % , -50 % ) ;
 largura : 150 % ; 
altura : 150 % ;
 fundo : transparente ;
 raio da borda : 50 % ;
 }

 /* ==== CONTROLES DE SLIDE ==== */
 . controlContainer {
 exibição : flexível ;
 justificar - conteúdo : centro ;
 posição : absoluta ; 
inferior : 2 % ;
 }
 : is ( .controlContainer , .pauseContainer2 ) : hover {
 transformar : escala ( 1.2 ) ;
 }
 Tela @media somente e ( largura máxima : 481px ) { 
: is ( .controlContainer , .pauseContainer2 ) : hover {
 transformar : escala ( 1.1 ) ;
 }
 . slideshowContainer {
 altura : 95vw ;
 }
 } 
. controlContainer : pairar > div {
 cor de fundo : var ( -botão - escuro - bg - color ) ;
 }
 . btnContainer {
 altura : 30px ;
 exibição : flexível ; 
justificar - conteúdo : espaço entre ;
 alinhar - itens : centro ;
 cor : var ( -cor do botão ) ;
 cor de fundo : var ( -botão - bg - color ) ; 
preenchimento : 0,5 % ;
 }
 . controlBtn {
 display : bloco embutido ;
 cursor : ponteiro ;
 largura : 25px ;
 altura : 15px ;
 cor de fundo : var ( -cor do botão ) ;
 } 
. controlBtn : pairar {
 transformar : escala ( 1.2 ) ;
 cor de fundo : var ( -control - hover - color ) ;
 }
 . próximoBtn { 
-webkit - clip - path : polígono ( 15 % 0 , 65 % 50 % , 15 % 100 % , 0 85 % , 35 % 50 % , 0 15 % ) ; 
clip - path : polígono ( 15 % 0 , 65 % 50 % , 15 % 100 % , 0 85 % , 35 % 50 % , 0 15 % ) ; 
}
 . anteriorBtn { 
-webkit - clip - path : polígono ( 100 % 15 % , 65 % 50 % , 100 % 85 % , 85 % 100 % , 35 % 50 % , 85 % 0 ) ; 
clip - path : polígono ( 100 % 15 % , 65 % 50 % , 100 % 85 % , 85 % 100 % , 35 % 50 % , 85 % 0 ) ; 
}

 . slideDotContainer {
 preenchimento : 0 ! importante ;
 posição : relativa ;
 largura : 100 % ;
 margem : 0,5rem ;
 exibição : flexível ;
 justificar - conteúdo : espaço entre ; 
alinhar - itens : centro ;
 }

 . slideDots : pairar {
 transformar : escala ( 1.2 ) ;
 cor de fundo : var ( -control - hover - color ) ;
 }

 . slideDots { 
posição : relativa ;
 cor de fundo : transparente ;
 borda : 2px var sólido ( -cor do botão ) ;
 largura : 10px ;
 altura : 10px ;
 raio da borda : 50 % ;
 margem : 0 1px ; 
estilo de lista : nenhum ;
 }

 . ponto ativo {
 cor de fundo : var ( -control - hover - color ) ;
 }
 . pauseContainer {
 posição : relativa ;
 largura : 30px ;
 altura : 30px ; 
margem - esquerda : 1rem ;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 cor de fundo : var ( -botão - bg - color ) ;
 }
 . pausaBtn { 
largura : 50 % ;
 altura : 50 % ;
 posição : absoluta ;
 cor de fundo : var ( -cor do botão ) ; 
-webkit - clip - path : polígono ( 0 % 0 % , 0 % 100 % , 40 % 100 % , 40 % 0 , 60 % 0 , 60 % 99 % , 100 % 100 % , 100 % 0 % ) ; 
clip - path : polígono ( 0 % 0 % , 0 % 100 % , 40 % 100 % , 40 % 0 , 60 % 0 , 60 % 99 % , 100 % 100 % , 100 % 0 % ) ; 
}
 . jogarBtn {
 largura : 50 % ;
 altura : 60 % ;
 Mostrar nenhum ;
 posição : absoluta ;
 cor de fundo : var ( -cor do botão ) ; 
-webkit - clip - path : polígono ( 0 0 , 0 100 % , 100 % 49 % ) ; 
clip - path : polígono ( 0 0 , 0 100 % , 100 % 49 % ) ;
 }
 . playBtn : pairar {
 transformar : escala ( 1.2 ) ; 
cor de fundo : var ( -control - hover - color ) ;
 }
 . pauseBtn : pairar {
 transformar : escala ( 1.2 ) ; 
cor de fundo : var ( -control - hover - color ) ;
 }

 /* === COLOCAÇÃO DA DESCRIÇÃO === */
 . lugar - centro - esquerda {
 justificar - conteúdo : centro ;
 }
 . lugar - centro { 
justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 }
 . lugar - superior - direito {
 justificar - conteúdo : flex - start ;
 }
 . lugar - inferior - direita { 
justificar - conteúdo : flex - end ;
 }
 . lugar - superior - esquerda {
 justificar - conteúdo : flex - start ;
 alinhar - itens : flex - end ;
 }
 . lugar - inferior - esquerda { 
justificar - conteúdo : flex - end ;
 alinhar - itens : flex - end ;
 }

6. Por último, na pasta Asset, abra global.js ou pode ser theme.js para outros temas. Se você estiver usando um arquivo javascript minificado, cole-o no min.js que você está usando. Em seguida, cole o código abaixo.

classe CustomSlideshow estende HTMLElement {
 construtor ( ) {
 super ( ) ;
 
esse . autoplaySet = isto . conjunto de dados . Reprodução automática ;
 esse . intervalo = isto . conjunto de dados . intervalo ;
 esse . slides = isto . querySelectorAll ( ".slideWrapper" ) ; 
esse . img = isto . querySelector ( ".slideImage" ) ;
 esse . prevBtn = isto . querySelector ( "#prevBtn" ) ; 
esse . próximoBtn = isto . querySelector ( "#nextBtn" ) ;
 esse . pauseBtnContainer = isto . querySelector ( "#pauseBtnContainer" ) ; 
esse . pausaBtn = isto . querySelector ( ".pauseBtn" ) ;
 esse . playBtn = isto . querySelector ( ".playBtn" ) ; 
esse . slideDots = isto . querySelectorAll ( '.slideDots' ) ;
 esse . reprodução automática = isto . autoplaySet ;
 esse . índice = 0 ; 
esse . anteriorBtn . addEventListener ( ' clique' , isto.prevFx.bind ( este ) ) ; 
esse . próximoBtn . addEventListener ( ' clique' , isto.nextFx.bind ( este ) ) ;
 
esse . slideDots . forEach ( ( ponto ) => { ponto. addEventListener ( 'clique' , este . indexDot . bind ( este ) ) } ) ; 
if ( this . autoplaySet == 'true' ) {
 esse . pauseBtnContainer . lista de classes . remover ( 'oculto' ) ;
 } outro { 
esse . pauseBtnContainer . lista de classes . adicionar ( 'oculto' ) ;
 }
 esse . pauseBtnContainer . addEventListener ( ' clique' , isto.pauseFx.bind ( este ) ) ; 
esse . iniciar ( ) ;
 }
 iniciar ( ) {
 esse . goToSlide ( this.index ) ; _
 esse . pausaFx ( ) ;
 }
 próximoFx ( ) { 
esse . índice ++ ;
 if ( este.índice > este.slides.comprimento - 1 ) { isto . _ _ índice = 0 } ; 
esse . goToSlide ( this.index ) ; _
 esse . showDot ( this.index ) ; _
 }
 anteriorFx ( ) {
 esse . índice -- ; 
if ( este . índice < 0 ) { este . índice = isto . slides . comprimento - 1 } ;
 esse . goToSlide ( this.index ) ; _ 
esse . showDot ( this.index ) ; _
 }

 pausaFx ( ) {
 if ( isto . reprodução automática == 'verdadeiro' ) {
 esse . reprodução automática = 'falso' ; 
esse . jogarBtn . estilo . exibir = "bloco" ;
 esse . pausaBtn . estilo . exibir = "nenhum" ;
 clearInterval ( this.timeout ) ; 
esse . timeout = setInterval ( este.nextFx.bind ( isto ) , este.intervalo ) ; _
 } outro {
 clearInterval ( this.timeout ) ; 
esse . reprodução automática = 'verdadeiro' ;
 esse . jogarBtn . estilo . exibir = "nenhum" ;
 esse . pausaBtn . estilo . exibir = "bloco" ;
 }
 }
 indexDot ( e ) { 
deixe alvo = e. atualTarget . conjunto de dados . pontoId ;
 esse . showDot ( alvo ) ;
 esse . índice = alvo ;
 }
 showDot ( alvo ) { 
esse . slideDots . forEach ( ponto => ponto. classList.remove ( ' activeDot' ) ) ;
 esse . slideDots [ alvo ] . lista de classes . adicionar ( 'ativoDot' ) ; 
esse . goToSlide ( alvo ) ;
 }
 goToSlide ( índice ) {
 esse . slides . forEach ( ( slide ) => { slide.estilo.display = "none" } ) ; 
esse . slides [ índice ] . estilo . exibir = "bloco" ;
 }
 }

 elementos personalizados. define ( 'apresentação de slides personalizada' , CustomSlideshow ) ;

Atualização 20/10/21: Fiz algumas alterações no código para que os botões apareçam com design minimalista. (veja a imagem abaixo como é)

imagem de apresentação de slides amanhecer

Atualização 06/11/21: adicionei uma opção de largura total (no editor de tema personalizado, clique em "Apresentação de slides personalizada" à sua esquerda. Você deve ter as configurações de largura total e intervalo lá. (veja a imagem abaixo ).Eu também fixo os pontos, então quando você clica neles, o índice passa para os botões e se torna o ponto atual.

ATUALIZAÇÃO 12/02/22: Fiz algumas atualizações importantes para ter várias apresentações de slides na mesma página. Tenho as opções de cores disponíveis no editor de temas. Você também pode ter a opção de ocultar os controles. Tornou-o compatível com dispositivos móveis.

Deixe-me saber se você tem perguntas. Aproveitar! (",)

27 comentários

Awesome, thank you so much ! There are just some small issues :
- the pause button (when autoplay is enabled) doesn’t work
- the arrows don’t work on mobile
- we can’t swipe left and right on mobile to see the previous and the next slide

laura • 9 de novembro de 2021

The Full width option is great . Thanks for the update. How do I hide the controls buttons .. i mean if I dont want to display the arrows and dots?

Jagan • 8 de novembro de 2021

Hi everyone,
Just updated the code and added a full-width.

Made4uo • 6 de novembro de 2021

Awesome work, Can we do this on full width ?

Saneesh • 1 de novembro de 2021

Yes very impressive and lot of options but I am having the same problem. cannot set the full width in CSS . The left side has some margin and it does not align

Jagan • 26 de outubro de 2021

Hi @Smith Lee,
May I see your website?

Made4Uo • 24 de outubro de 2021

Very stunning work, I have applied this plugin in my store. The only problem is that it can’t be set to full width, I changed the width value to 100vm in the CSS but there is still a blank column on the left side of the image, looking forward to fix it.

Smith Lee • 22 de outubro de 2021