Como Criar um CARROSSEL INFINITO no Elementor Free e Pro [Carrossel sem pausa e com Desfoque]

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: https://www.hostg.xyz/aff_c?offer_id=418&aff_id=45684&source=carroselinfinito + Cupom DESCOMPLICANDOSITES 🔥🔥🔥

✅Adquira o Elementor Pro aqui: https://descomplicandosites.com.br/elementor-pro

✅Royal Addons Premium pelo link: https://r.freemius.com/8416/5101693

✅Plugin de Otimização e Performance WP-Rocket: https://bit.ly/OtimizacaoWP-Rocket

✅Crocoblock Elementor (Todos os Jet) – https://bit.ly/JetPlugins

👉Entre e participe do nosso canal VIP no Telegram: https://t.me/descomplicandosites ❤️

👉Se inscreva no canal: https://bit.ly/QueroMeInscreverDS

👉Portfólio de sites do Canal: https://descomplicandosites.com.br/sites

🔻Links citados e outros que você pode gostar também🔻:
LP Tráfego Supremo – https://youtu.be/0uIqBzY7_gs

Como Comprar Hospedagem e Domínio com Desconto + Instalar o WordPress – https://youtu.be/5EsxkEtVVG8

🔻PlayLists:🔻
– Novidades do Elementor: https://bit.ly/NovidadesElementor
– Da Venda de Sites a Entrega: https://bit.ly/VendaEntregaDeSites
– Como Criar Sites Completos: https://bit.ly/ComoCriarSitesDoZero
– Otimização de Sites – https://bit.ly/OtimizacaoDeSites
– Dicas de Design: https://bit.ly/DicasDesignComElementor
– Marketing de Afiliados: https://bit.ly/MktAfiliadosWPElementor
– Marketing Digital: https://bit.ly/MktElementorWP
– Blog: https://bit.ly/BlogWPElementor
– Menus: https://bit.ly/MenusComElementor
– Popups: https://bit.ly/PopupsComElementor
– Plugins do Crocoblock: http://bit.ly/PlayListCrocoblock
– Hospedagem de Sites: https://bit.ly/HospedagemDeSites_
– Emails: https://bit.ly/EmailsWordPressElementor

☑️ Como Criar um CARROSSEL INFINITO no Elementor Free e Pro [Carrossel sem pausa e com desfoque] – Compartilhe o Vídeo: https://youtu.be/7v8oVxMsP38

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: https://bit.ly/QueroMeInscreverDS

📍 Sigam minhas redes sociais
💲 Instagram – @descomplicandosites
💲 Telegram – @descomplicandosites

Boa aula!

Com amor,
Micaela Soares – Descomplicando Sites.

#CarrosselInfinitoElementor #Elementor #Carrossel