[Carrossel] Perspectiva Vertical
[Carrossel] Perspectiva Vertical Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .elementor-image-carousel-wrapper{ transform: perspective(100rem) translate3d(0, 0, -5rem) rotateX(50deg) scale(1, 1) !important; }
[Carrossel] Slide próximo aparecendo metade
[Carrossel] Slide próximo aparecendo metade Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .swiper{ padding-inline-end: 100px; }
[Carrossel] Navegação Posição Cima
[Carrossel] Navegação Posição Cima Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Deixe nas configurações ativo a navegação de Setas Código CSS Copiar Código selector .elementor-swiper-button-prev{ top: -18% !important; left: calc(50% – 50px); transform: translate-x(-50%); } selector .elementor-swiper-button-next{ top: -18% !important; right: calc(50% – 50px); transform: translate-x(-50%); }
[Carrossel] 1 Destacado
[Carrossel] 1/3 Destaque Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens podendo ser alterado. (obs: recomendo um carrossel, recomendo usar 3 no slides a mostrar) Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .swiper-slide-prev { filter: blur(10px); transform: scale(0.5); transition: 0.5s; } .swiper-slide-active{ filter: blur(3px); transform: scale(0.7); transition: 0.5s; } .swiper-slide-next ~ .swiper-slide{ transform: scale(0.7); transition: 0.5s; } .swiper-slide-next ~ .swiper-slide{ filter: blur(3px); transform: scale(0.7); transition: 0.5s; }}
[Carrossel] Blur Looping
[Carrossel] Blur Looping Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código .swiper-wrapper{ transition-timing-function: linear !important; } .swiper-slide{ opacity: 1; animation: opacity 3s infinite; transition: 0.5s; } .swiper-slide[data-swiper-slide-index=”0″]{ animation-delay: 0.3s; } .swiper-slide[data-swiper-slide-index=”1″]{ animation-delay: 0.6s; } .swiper-slide[data-swiper-slide-index=”2″]{ animation-delay: 0.9s; } .swiper-slide[data-swiper-slide-index=”3″]{ animation-delay: 1.2s; } @keyframes opacity{ 0%, 100%{ opacity: 0.4; /*defina a menor opacidade*/ filter: blur(10px); /*defina o blur*/ } 50%{ opacity: 1; filter: blur(0px); } } selector::before { content:””; pointer-events: none; width: 550px; /*defina otamanho do círculo*/ height:550px; /*defina otamanho do círculo*/ border-radius: 50%; position: absolute; top: 0; left: 0; z-index:2; transform: translate(-50%, -50%); background: black; /*defina a cor do círculo*/ animation: circulo 5s infinite alternate ease-out; /*defina o tempo do círculo*/ transition: 0.5s all; filter: blur(100px); /*defina o blur do círculo*/ z-index: 0; } @keyframes circulo{ 0%, 100%{ transform: translatex(50em); } 50%{ transform: translatex(0em); } } selector{ overflow: hidden !important; }
[Carrossel] Fade nas Laterais
[Carrossel] Fade nas Laterais Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector::before{ content: “”; position: absolute; top: 0; left: 0; width: 500px; /* Largura da máscara esquerda */ height: 100%; background: linear-gradient(to right, #090909 30%, transparent); /* Gradiente de cor escura para simular o blur */ z-index: 2; /* Acima do conteúdo */ /* backdrop-filter: blur(5px); REMOVIDO pois é inconsistente/causa bugs */ /* webkit-backdrop-filter: blur(5px); REMOVIDO */ } selector::after{ content: “”; position: absolute; top: 0; right: 0; width: 500px; /* Largura da máscara direita */ height: 100%; background: linear-gradient(to left, #090909 30%, transparent); /* Gradiente de cor escura para simular o blur */ z-index: 2; /* Acima do conteúdo */ /* backdrop-filter: blur(5px); REMOVIDO */ /* webkit-backdrop-filter: blur(5px); REMOVIDO */ }
[Carrossel] Slide Contínuo
[Carrossel] Slide Contínuo Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Configuração dentro do Widget de Carrossel de Imagens Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .swiper-wrapper{ -webkit-transition-timing-function: linear !important; transition-timing-function: linear !important; }
[Carrossel] Paginação V1
[Carrossel] Paginação V1 Adicione um Widget de Carrossel de Imagens no Elementor Não precisa definir Classe Aplique esse código CSS no Elemento (Avançado/Custom CSS) Código CSS Copiar Código selector .swiper-pagination-bullet-active{ width: 30px; /*mude a largura por aqui*/ border-radius: 2px; } selector .swiper-pagination-bullet{ transition: 0.5s; }