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

Опубликовано: 29 Сентябрь 2024
на канале: Descomplicando Sites

14,357

747

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=... + Cupom DESCOMPLICANDOSITES 🔥🔥🔥

✅Adquira o Elementor Pro aqui: https://descomplicandosites.com.br/el...

✅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 -    • Como Criar uma LANDING PAGE no WordPr...

   • Como CRIAR OS BANNERS (no Canva) para...

Como Comprar Hospedagem e Domínio com Desconto + Instalar o Wordpress -    • Como Comprar Hospedagem de Site, Domí...

   • Como Criar um SITE NO WORDPRESS com E...

   • Como Criar Um SITE PROFISSIONAL no Wo...

   • Como Fazer uma LANDING PAGE no WordPr...

   • Como Criar uma PAGINA DE VENDAS no Wo...

   • Como Criar uma LOJA VIRTUAL no WordPr...

   • Como Criar uma LOJA DE DROPSHIPPING n...

   • LiteSpeed Cache: Como OTIMIZAR SITE W...

   • INCRÍVEL! Como Fazer Banner para Site...

🔻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:    • Como Criar um CARROSSEL INFINITO no E...

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