Apresentação de slides com 11 designs exclusivos

{ { '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 % }

. 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 ;
 }

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 ) ;