Carrossel com slide pela metade no Elementor

[@hlnhd]

Isso já deveria ser o padrão no Elementor. É impressionante como eles estão atrasados em termos de usabilidade. Parabéns pelo conteúdo.

[@eduardodinizxx]

Hoje em dia tem o “ carousel “ tem isso e da pra colocar dos dois lados

[@hlnhd]

@@eduardodinizxx não sabia dessa não. Me acostumei a usar o carrossel do jet engine da crocoblock. Vou dar uma olhada.

[@eduardodinizxx]

Obrigado Silvio

[@cortesverissimo]

Cara como é bom saber HTML, CSS e JS. Acho que pra pessoa se declarar um profissional em Web Design, é obrigatório saber!

[@victorfernandesmonteiro6453]

const carrosseis = document.querySelectorAll(".carrossel"); carrosseis.forEach(carrossel => { let dataSettings = carrossel.getAttribute("data-settings" ); let settings0bj = JSON.parse(dataSettings); settingsObj.slides_to_show = "3.5"; settings0bj.slides_to_show_tablet = "2.5"; settings0bj.slides_to_show_mobile = "1.3"; let novoDataSettings = JSON.stringify(settings0bj); carrossel. setAttribute("data-settings", novoDataSettings);

[@cortesverissimo]

Up

[@cortesverissimo]

Up

[@cortesverissimo]

Up

[@cortesverissimo]

Up

[@cortesverissimo]

Up pra os preguiçosos kkk

[@Bey7]

Funciona com o novo carrossel de tudo do Elementor Pro? Aquele com os três pontinhos embaixo no ícone.

[@williamrosario2577]

eu procuro isso na internet a meses e nunca achei kkkkkk top!

[@rogerio8710]

Fechou, anotado mais um truque.😁😁😁

[@PhilipMartinss2lyadiggory]

Top como sempre!

[@fcschiavon]

com o testomonial carrossel nao ta funcionando. É algum problema relacionado ao elemento? obg

[@sulconservador]

Show... então é possivel deixar a imagem da direita pela metade, mas como seria possivel deixar a imagem da esquerda também pela metade??? Ou seja, as duas das pontas. É possivel?

[@byluan_]

Esse vídeo veio na hora certa, muito bom Othon. Mas na resolução widescreen (ultrawide), ele não está aplicando a definição de de quantos slides exibir. Já tentei usando a função nativa (sem script) e não está aplicando de forma nenhuma. Somente da resolução desktop pra baixo deu bom.

[@othonciparoni]

Precisa adicionar ali no código a quantidade específica para widescreen também. Assim: settingsObj.slides_to_show_widescreen = "3.5"

[@byluan_]

@@othonciparoni Sim, tentei dessa forma, mas mesmo assim a versão wide esta herdando sempre a configuração do desktop. Testei até usando as configurações nativas do widget em cada breakpoint, mas no wide não esta obedecendo. Acho que o jeito é eu testar em outro ambiente pra ver se é algum bug/erro...

[@davidmendonca1582]

Nesse código daria para fazer os carroseis em modo center?

[@othonciparoni]

Depende do que você quer dizer com modo center. Esse código é para mudar quantidade de slides em exibição. Outras customizações devem ser feitas com CSS, ou alterando os parâmetros do SwiperJS, seja fazendo o carrossel inteiro com código, ou usando Javascript para alterar os parâmetros pelo Elementor.

[@WallinsonDev]

Ei, Othon, pensou na possibilidade de apenas diminuir um pouco do container com CSS ao invés de ampliar e ter q fazer tudo no JS? Eu não uso elementor, então não sei se daria certo. Oq vc me diz?

[@othonciparoni]

O tamanho de cada slide é definido por Javascript, direto nas configurações do SwiperJS (biblioteca de carrosséis utilizada pelo Elementor). Quanto tentamos forçar com CSS, geralmente dá problema com a navegação (os slides não param no lugar certo, fica alguns espaços vazios, etc).

[@WallinsonDev]

@@othonciparoni Show. Parabéns pelo conteúdo

[@jimmygarutti]

Hey Cipa! Bão demais? Cara, como você faz pra deixar as imagens como o BackGround pesando KBs ao invés de MBs e com uma qualidade absurda? Vi um site seu de exemplo do Jordan e o Wallpaper tava pesando 500Kb, mas mesmo otimizando no tinyPNG e jogando como Webp não consegui por aqui

[@othonciparoni]

Pode ter certeza que meu BG não tinha 500kb. Isso já é muito pesado. Mas tudo depende da forma como a imagem foi construída (quais elementos, efeitos aplicados no Photoshop, etc). Via de regra, eu não faço nenhuma grande otimização, só exporto em webp direto do Photoshop mesmo. Costuma ficar entre 60kb e 150kb, dessa forma.

[@jimmygarutti]

Ah sim! Perdão, era pra ser 50kb. Muito obrigado bro😊@@othonciparoni

[@Mccandless87]

Da pra fazer no Divi?? Qual seria a solução?

[@othonciparoni]

Não sei, não uso Divi.

[@denisgastardelli]

Muito top 👍 cipa, me salvou, estava com esse problema. Ajudou demais. Mas se fosse fazer em ambos os lados, como faria? Tem como?

[@othonciparoni]

Aí você mesclaria os dois códigos que mostrei no vídeo: o script, e o CSS. Só que ao invés de padding-inline-end, você usaria padding-inline-start. Assim: selector .swiper{ padding-inline-start: 150px; }

[@denisgastardelli]

⁠​⁠ Que demais, cipa 👏👏 parabéns pelo conteúdo

[@pierre.fontenele]

No meu não funcionou, qual seria o problema?

[@pierre.fontenele]

const carrosseis = document.querySelectorAll(".carrossel"); carrosseis.forEach(carrossel => { let dataSettins = carrossel.getAttribute("data-settings"); let settingsObj = JSON.parse(dataSettings); settingsObj.slides_to_show = "3.5"; settingsObj.slides_to_show_tablet = "2.5"; settingsObj.slides_to_show_mobile = "1.3"; settingsObj.slides_to_show_widescreen = "3.5"; let novoDataSettings = JSON.stringify(settingsObj); carrossel.setAttribute("data-settings", novoDataSettings); })

[@othonciparoni]

@@pierre.fontenele você escreveu let dataSettins, sem o g.

[@pierre.fontenele]

Continuou sem funcionar, poderia ser algum bug?@@othonciparoni

[@othonciparoni]

@@pierre.fonteneletirando isso, não há nenhum outro erro no código. Se você adicionou a classe carrossel, usou o widget que eu mencionei no vídeo e colocou o código em um widget HTML no rodapé da página, não sei o que possa ser. Aí só inspecionando a página pra saber. Olhe na aba console, do DevTools, pra ver se há algum outro erro que possa estar influenciando nesse código.

[@pierre.fontenele]

está apresentando este erro, acredito que seja ele: Uncaught SyntaxError: Identifier 'carrosseis' has already been declared (at (index):618:12) @@othonciparoni

[@Hericjr]

Bom conteúdo! Mas agora o Elementor já tem isso nativo.

[@othonciparoni]

Tem no carrossel aninhado. Nos demais, ainda não tem.

[@Hericjr]

@@othonciparoni verdade, ele não liberou pra todos. Obrigado pelos conteúdos, são fora da curva. Abraço!

[@realdillan]

Quando começa com código eu fico perdido kkkkkk

[@leonardofavaretto2289]

10/10