Como Criar um CARROSSEL INFINITO no Elementor Free e Pro [Carrossel sem pausa e com Desfoque]
HTML-код
- Опубликовано: 26 дек 2023
- Aprenda neste tutorial Elementor a como criar um Carrossel Infinito no Elementor Free e Elementor Pro. Eu ensino como fazer um carrossel “rolar/scrollar” infinitamente sem pausar no site WordPress + Elementor. Mostro como criar dois tipos de carrossel contínuo no Elementor: Um que passa as imagens infinitamente e outro que dá uma pequena pausa mas desfoca a primeira e a segunda imagem do carrossel.
✅Hostinger: Hospedagem de Sites com Desconto Extra de + 10% OFF pelo link: www.hostg.xyz/aff_c?offer_id=... + Cupom DESCOMPLICANDOSITES 🔥🔥🔥
✅Adquira o Elementor Pro aqui: descomplicandosites.com.br/el...
✅Royal Addons Premium pelo link: r.freemius.com/8416/5101693
✅Plugin de Otimização e Performance WP-Rocket: bit.ly/OtimizacaoWP-Rocket
✅Crocoblock Elementor (Todos os Jet) - bit.ly/JetPlugins
👉Entre e participe do nosso canal VIP no Telegram: t.me/descomplicandosites ❤️
👉Se inscreva no canal: bit.ly/QueroMeInscreverDS
👉Portfólio de sites do Canal: descomplicandosites.com.br/sites
🔻Links citados e outros que você pode gostar também🔻:
LP Tráfego Supremo - • Como Criar uma LANDING...
• Como CRIAR OS BANNERS ...
Como Comprar Hospedagem e Domínio com Desconto + Instalar o Wordpress - • Como Comprar Hospedage...
• Como Criar um SITE NO ...
• Como Criar Um SITE PRO...
• Como Fazer uma LANDING...
• Como Criar uma PAGINA ...
• Como Criar uma LOJA VI...
• Como Criar uma LOJA DE...
• LiteSpeed Cache: Como ...
• INCRÍVEL! Como Fazer B...
🔻PlayLists:🔻
- Novidades do Elementor: bit.ly/NovidadesElementor
- Da Venda de Sites a Entrega: bit.ly/VendaEntregaDeSites
- Como Criar Sites Completos: bit.ly/ComoCriarSitesDoZero
- Otimização de Sites - bit.ly/OtimizacaoDeSites
- Dicas de Design: bit.ly/DicasDesignComElementor
- Marketing de Afiliados: bit.ly/MktAfiliadosWPElementor
- Marketing Digital: bit.ly/MktElementorWP
- Blog: bit.ly/BlogWPElementor
- Menus: bit.ly/MenusComElementor
- Popups: bit.ly/PopupsComElementor
- Plugins do Crocoblock: bit.ly/PlayListCrocoblock
- Hospedagem de Sites: bit.ly/HospedagemDeSites_
- Emails: bit.ly/EmailsWordPressElementor
☑️ Como Criar um CARROSSEL INFINITO no Elementor Free e Pro [Carrossel sem pausa e com desfoque] - Compartilhe o Vídeo: • Como Criar um CARROSSE...
Muitos Web Designers que criam sites com WordPress, Woocommerce e Elementor Pro/ Elementor Free, querem fazer layouts e seções mais sofisticadas em seus sites. Muitos querem fazer uma bela seção de carrossel de imagens, por exemplo. Então neste vídeo eu mostro como criar uma seção/container com carrossel infinito Elementor, ou seja, o carrossel é contínuo, passas as imagens sozinho e automaticamente.
Códigos CSS:
/*CSS para carrossel infinito */
/*Inicio Css Infinito*/
selector .swiper-container{
width: 100%;
height: 100%;
overflow: hidden;
}
selector .swiper-wrapper{
display: flex;
animation: infiniteSlide 15s linear infinite;
}
@keyframes infiniteSlide {
from {
transform: translateX(0%);
}
to {
transform: translateX(-100%);
}
}
/*Fim Css Infinito*/
/*CSS para carrossel com Desfoque. Não usar junto com CSS acima*/
/*Inicio Css com Desfoque*/
/*
classes slides
swiper-slide-prev
swiper-slide-active
swiper-slide-next
classes setas nav
elementor-swiper-button-prev
elementor-swiper-button-next
fim comentario*/
selector .swiper-slide{
transform: scale(0.97);
}
selector .swiper-slide:hover{
transform: scale(1);
transition: 1s;
}
selector .swiper-slide-active:hover{
transform: scale(1);
transition: 1s;
}
selector .swiper-slide-prev{
transition: 1s;
filter: opacity(25%);
}
selector .swiper-slide-next ~ .swiper-slide ~ .swiper-slide ~ .swiper-slide ~ .swiper-slide{
transition: 1s;
filter: opacity(25%);
}
/*Ajustes Tablet*/
@media(min-width: 767px) and (max-width: 1023px){
selector .swiper-slide-next ~ .swiper-slide ~ .swiper-slide{
transition: 1s;
filter: opacity(25%);
}
}
/*Ajustes Mobile*/
@media(max-width: 766px){
selector .swiper-slide-prev{
transition: 1s;
filter: opacity(25%);
transform: scale(0.97);
}
selector .swiper-slide-active{
transition: 1s;
transform: scale(1);
}
selector .swiper-slide-next{
transition: 1s;
filter: opacity(25%);
transform: scale(0.97);
}
}
/*Fim Css com Desfoque*/
👉Se inscreva e ative o sininho das notificações para ver novos vídeos e dicas sobre WordPress, Elementor, Woocommerce, Hospedagens de Sites e de como Viver de Criação de Sites.
Clique aqui: bit.ly/QueroMeInscreverDS
📍 Sigam minhas redes sociais
💲 Instagram - @descomplicandosites
💲 Telegram - @descomplicandosites
Boa aula!
Com amor,
Micaela Soares - Descomplicando Sites.
#CarrosselInfinitoElementor #Elementor #Carrossel
![Como Criar CARDs com ÍCONES ANIMADOS no Elementor WordPress [ícones animados no Elementor]](http://i.ytimg.com/vi/OTEM71Q1HXI/mqdefault.jpg)
![Como Criar CARDs com ÍCONES ANIMADOS no Elementor WordPress [ícones animados no Elementor]](/img/tr.png)
![Aula 7: Como Adaptar SITE RESPONSIVO no Elementor [Celular, Desktop, Tablet e +] Curso de Elementor](http://i.ytimg.com/vi/HvI5xfnWHCI/mqdefault.jpg)
![Como criar Carrossel totalmente personalizado no Elementor 3.14 [Atualização incrível]](/img/1.gif)
Simplesmente fantástico!
Perfeeeitooo, muito obrigada ♥♥♥
Muuito bom o vídeo!! Me ajudou muito❤
O que temos aqui?
A Cada vídeo um conteúdo melhor que o outro! ❤👏👏👏👏👏👏👏👏
Obrigada ☺️
Muito top ficou show aqui na minha pagina muito obrigado
ótimo vídeo, me ajudou muito!!
Obg pelas suas informações. Vc está me ajudando muuuuito. Sucesso. Abcs.
Obrigada ☺️
Nossa ficou perfeito na minha página, obrigada. Você é uma mentora excelente!
@@natashaleite1744 obrigada ☺️
Obrigado.
Colei o código no CSS, mas na versão mobile fica lento e trava na segunda foto... Pq será?
Micaela, muito obrigado por mais esse conteúdo riquíssimo
Obrigada ☺️
Mi, seu canal é simplesmente incrível! A forma como você ensina a criar sites de maneira descomplicada fez com que até eu, sem experiência, conseguisse criar o meu. Sua didática excelente e a clareza dos vídeos tornam o aprendizado divertido e acessível. Desejo a você muito sucesso e que 2024 seja tão incrível quanto 2023, cheio de realizações e aprendizados. Parabéns pelo trabalho fantástico!
muuuito obrigada, Deus abençoe você também
Fantástico
maravilhosa!
Muito bom, já estou usando no meu site
Aí simmm
Olá, o meu carrossel esta dando erro. Eu estou colocando 5 imagens, e na hora que vai rolar, aparece somente duas. Como resolver esse problema?
NO MEU NÃO FUNCIONOU FICA PARANDO NÃO SEI SE ESSE4 CODÍGO ESTÁ CERTO NO VIDEO FIZ TODOS MAS ETAPAS CERTAS MÁS O INICIO E FIM DO CODIGO FIZ DIVERSAS MANEIRAS E NADA
Aula top, Micaela qual o tamanho ideal se fosse utilizar fotos?
Micaela, adoro teu conteúdo. Vc pode me dizer onde eu encontro um video explicando sobre fazer criativos e como funcionam nos anuncios pagos, tipo saiba mais, e como eles são linkados numa landing page, onde supostamente estao as informacoes do "saiba mais" ... Ahhh tb tem o link do checkout onde as pessoas vao pagar em outra página externa ... Se vc tiver esse conteudo vc pode informar aqui. ❤ Te amo
Oi Mi, obrigado por mais um tutorial, o meu carrossel de rolagem infinita esta resetando na metade da animaçao, digamos que ele rode 4 cards e depois reseta ou seja, não termina a execuçao completa do carrossel, consegue me ajudar ?
O meu acontece a mesma coisa.
olá tudo bem só uma pergunta, esse templetes estão disponíveis para vendas, ou tem algum pacote de templetes pra vender?
muito bacana este canal esta com varios conteudos incriveis , uma duvida queria que ao visitante encostar o mouse nas imagens que passa no carrossel fosse dado um feito um certo destaque na imagem ela se sobrepor algo do tipo que acaba estimulando o click
Obrigada vou tentar criar esse css
Quando acaba o slide ele volta pro primeiro, ai da uma transição seca... como que muda isso?
dá pra fazer vídeos para o youtube com carrossel infinito sobre os países mais populosos?
Ótimo vídeo, mas nn consegui usar o código com desfoque, como faço? :/
Mika coloquei 12 imagens mas só roda 2 imagens, e fica se repetindo no mobile, consegueria me ajudar, desde de ja agradeço muito.
Estou com o mesmo problema
Oi bom dia .
Vc faz esse tipo de serviço eu preciso fazer um ajuste para minha pagina ou se tiver um zap para conversar melhor
Alguém sabe fazer pelo canva?
@Descomplicando Sites
Tem como criar carrossel de imagens que fica parado ? E dentro do carrossel se o cliente quiser clica próximo ou anterior ?
Tem, só não ativar a função de reproduzir sozinho
Aqui não está dando certo.
Ele não fica repetindo infinitamente, sempre corta no final e volta.
vc conseguiu resolver mano? to tendo esse b.o tb
Poderia gravar um vídeo mostrando como mudar o título da página? Adicionei um tamplete e veio com o título escrito " yoga" mas não consigo mudar para o nome da minha loja
Olá td bem ? É lá em configurações- geral aí tem título do site e descrição
@@DescomplicandoSitesobrigada pela mensagem, mas ainda não consigo pq essa opção muda apenas o nome do menu e não o nome da loja que fica no canto esquerdo ao lado dos menus
Tem a possibilidade de no carrossel incluir link para a venda de um determinado produto?
Nesse aí não, tem q usar outro widget