Slider (Carousel) JavaScript Responsivo e Fácil de Usar

Подписаться 26 тыс.

Просмотров 30 тыс.

50% 1

Glider.js é um slider JavaScript puro, responsivo, eficiente, leve e muito fácil de usar!
Glider.js, apesar de ser um slider JavaScript que já estar na praça há algum tempo, ainda não é tão usado quanto merece.
Ele é muito rápido, bem levinho, totalmente responsivo (mobile-friendly), não usa qualquer dependência (slider JavaScript puro; dependency free) e usa recursos nativos do navegador para fazer o scrolling e controle de paginação.
Neste vídeo, conheça melhor esse carousel com JavaScript puro através de 3 exemplos:
1. Carousel simples
2. Carousel responsivo
3. Carousel com miniaturas
Existem muitas soluções para slider com JavaScript, mas nem todos os sliders com JavaScript puro têm tantas boas características (e oferecem tantas possibilidades) quanto o Glider.js.
Apesar de não ser o slider/carousel mais popular, ele prova que pode ser usado em muitas situações e projetos Web, mostrando o que pode oferecer através de sua codificação simples, peso superotimizado, velocidade incrível e capacidades responsivas.
Certamente, Glider.js pode ser considerado com carinho na próxima vez em que precisar implementar um slider JavaScript.
🧾 Projeto no GitHub
github.com/des...
✏️ Glider.js: slider JavaScript puro, responsivo e fácil de usar
desenvolviment...
➡️ Basic Front Boilerplate (BFB)
• Basic Front Boilerplat...
➡️ BEM: A Convenção CSS Para Um Front End Muito Melhor
• BEM: A Convenção CSS P...
➡️ O Básico de Sass para se Virar nas Webs
• O Básico de Sass para ...
💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo
/ discord
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolviment...

Опубликовано:

7 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@pedrobreke9066 11 месяцев назад

Muito obrigado amigo, não sabia da dica do começo de priorizar o nosso link de estilização, agora não tenho mais bugs, você é um máximo!!!!!!!

@dpwoficial 11 месяцев назад

Que bom que ajudamos, Pedro. vlwww

@thiagosoares7414 Год назад

Recurso muito bom, didática excelente, obviamente +1 inscrito e like.

@dpwoficial Год назад

Muito obrigado, Thiago.

@VictorHugoAlves7 Год назад

To bem no início ainda. Não estou muito familiarizado com sass ou scss. Mas vou tentar implementar nos projetos aqui. Valeu

@dpwoficial Год назад

É muito bom. Você vai gostar. Dá uma olhada nesse vídeo: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kA-PXyfjL84.html

@ricardinhoakj6176 2 года назад

Muito boa explicação. A velocidade da sua fala está sensacional para explicação. Mais 1 inscrito.

@dpwoficial 2 года назад

Muito obrigado, Ricardinho! 😁

@lucasfernandes-sc6ui 3 года назад

Gosto muito do seu conteúdo.

@dpwoficial 3 года назад

Muito obrigado, Lucas!

@walterbranco8798 2 года назад

Excelente explicação!

@dpwoficial 2 года назад

Obrigado!

@romuloalves9349 4 года назад

Ótimo vídeo parabéns 👏 gostaria de ver um popup newsletter que aparecece somente uma vez automaticamente e não toda hora que a página e atualizada.

@dpwoficial 4 года назад

Boa sugestão, Romulo. Vamos colocar na fila. ;)

@romuloalves9349 4 года назад

@@dpwoficial Beleza ✌.

@JulioCesar-hn2ev Год назад

Obrigado meu irmão. Conteúdo top! +1 inscrito

@dpwoficial Год назад

vlw bro 👊

@raissafaria7247 2 года назад

ótimo video e o código realmente funciona

@dpwoficial 2 года назад

Que bom que gostou. :)

@raissafaria7247 2 года назад

@@dpwoficial aproveitando que você respondeu kkk eu tentei integrar esse slide em uma página que estou fazendo de trabalho da facul, mas aparece a mensagem "referenceError: Gilder is not defined" pra mim. O código a parte funciona perfeitamente, mas quando tento colocar no meu site não funciona mais. Poderia me ajudar nisso por favor?

@dpwoficial 2 года назад

@@raissafaria7247 Você está importando o Glide ANTES do script que você escreveu para usá-lo?

@elizduarte6547 4 года назад

Muito bom!

@dpwoficial 4 года назад

Vlw, Iza!

@emillyeduarda6813 3 года назад

muitooooooooo obrigada

@dpwoficial 3 года назад

Eu que agradeço pelo comentário. :)

@DanielCordeiroOficial 2 года назад

Fala parceiro, ótima didática de ensino em seus vídeos, estou acompanhando vários aqui. Parabéns... Qual seria a maneira de fazer ele passar os slides automaticamente? Caso ele não possua mesmo uma função 'auto' não seria possível usar um setInterval() para simular um clique no botão NEXT por exemplo?

@dpwoficial 2 года назад

Opa, Daniel. Obrigado pela audiência. :) Ele tem sim uma opção de autoplay: glidejs.com/docs/components/autoplay/

@elielmarques7477 2 года назад

Olá boa tarde! É realizar uma vídeo aula sobre geolocations sobre este mesmo assunto? Desde já agradeço.

@dpwoficial 2 года назад

Sugestão anotada, Leo! Abs

@danilosantos9252 Год назад

Olá, sempre que preciso aprender algo seus videos me ajuda independente do ano que foi lançado rs. Obrigado! me surgiu uma duvida. essas libs de js são muitos utilizadas no dia a dia? vejo que existe muitas libs mais a duvida é o quanto elas são realmente utilizadas, eu usava slick (carousel)mas nunca vi ninguém usando e nem sei se alguma empresa usa rs. Sou o cara que sai inspecionando os sites para ver as tecnologias que foram utilizadas. Eu realizo projetos pessoais e talz, mas não sei se é valido usar essas libs afinal não vejo sendo utilizadas em um contexto real, somente em videos ensinando e talz. Porém pode ter pessoas a dizer se esta ai é para usar, correto. Mas quando saber se esta usando algo valido no mercado?

@dpwoficial Год назад

Fala, Danilo. Beleza? Bom saber que você gosta do canal. Obrigado pela força. COM CERTEZA essas libs são usadas. Claro que vai depender de alguns fatores, como qualidade, hype, facilidade de uso, comunidade etc. Mas, a título de exemplo, Slick tem mais de 800k downloads POR SEMANA (só no npm); o próprio Glider, mais de 30k POR SEMANA. Podemos concordar que esses números de uso de libs não são todos para fazer vídeos com tutoriais, certo? Eu, mesmo, participo de projetos para grandes marcas do mundo todo, com budgets inacreditáveis, e Slick e Glider estão entre minhas primeiras escolhas de carousel. :)

@danilosantos9252 Год назад

@@dpwoficial Muito obrigado pela explicação, isso me ajudou a enxergar de uma forma diferente. Irei continuar estudando sobre as libs. Sucesso!

@dpwoficial Год назад

@@danilosantos9252 vlwww

@AnderCarlosNunes 2 года назад

Parabéns pelo conteúdo. Tenho depressão, estou sem emprego e gostaria muito de aprender a programar, só que quanto mais eu vejo tudo isso, mas eu tenho certeza que não vou conseguir aprender JavaScript ou qualquer outra linguagem . Eu fico frustrado quando eu tento fazer algo simples e não consigo terminar. Acho que vou desistir pq não sei se vou dar conta. É triste, é frustrante , desesperador...tudo ao mesmo tempo. :(

@dpwoficial 2 года назад

Se ficar reclamandinho, de caráter derrotista, e não colocar a mão na massa, não vai sair do lugar, mesmo... Para de reclamar e FAZ.

@natanvinicius6514 Год назад

vc ja ta desistindo antes de tentar direito,mantenha a calma e vai seguindo,tem dias que os estudos fluem e tem dias que a gente nao entende porra nenhuma... mas o importante é continuar,e assim a mente vai entendendo...se vc nao consegue terminar algo "simples" é pq ainda nao é tao simples assim,de a atençao devida pro que vc ta fazendo e nao se coloque tao pra baixo,programaçao nao é facil mas tbm nao é um bicho de sete cabeça. esse desespero nao vai te ajudar em nada meu amigo,faz sua parte e deixa que a vida ajuda um pouquinho de forma natural,vc nao é deus pra ter o controle de tudo e ser uma maquina de aprender

@Fabrici03 3 года назад

Ótimo vídeo Dpw, porém fiquei pensando, é possível utilizar vários slides com o glider no mesmo doc html? tipo um netflix com slides de filmes, séries, etc. Obrigado e Parabéns por compartilhar conhecimento.

@dpwoficial 3 года назад

Sim, é possível. Na própria página de demos do Glider, isso acontece. :)

@thejiren3889 2 года назад

Uma pergunta tem algum código seja com css ou javascript q deixa uma div fixada na parte inferior da tela não importa a dimensão do aparelho?

@dpwoficial 2 года назад

codepen.io/FrancescoBaldan/pen/wWVmmz

@codewithbru 2 года назад

Eai!! Valeu pelo vídeo. Fiquei com uma dúvida aqui, toda vez que eu clico no botão de passar (no meu caso é uma tag "a"), a página recarrega. Tem alguma maneira de eu usar .preventDefault(); em Glider.js?

@dpwoficial 2 года назад

É semanticamente mais apropriado que o botão de passar seja uma tag .

@codewithbru 2 года назад

@@dpwoficial e isso resolveu meu problema, obrigada

@AllanMegiani 3 года назад

Se o slick é o carousel nr 1 do mercado, eu nem quero imaginar os que estão no fim dessa lista.... Nunca trabalhei com um carousel mais problemático que o slick....

@dpwoficial 3 года назад

Que isso, eu acho ele bem eficiente. Nunca tive maiores problemas. Mas, para muitos casos, estou preferindo o Glider por ele ser bem mais leve (~75%).

@alissonhonostorio 4 года назад

Mas o Glider é um framework, ou é uma classe/método do JS?

@dpwoficial 4 года назад

Eu encaro como uma biblioteca -- ele se encara como "scrollable list".

@luisborges1667 3 года назад

Excelente video, eu consigo ativar esse glider só para mobile?

@dpwoficial 3 года назад

Obrigado, Luis. Consegue, sim. É só fazer um condicional para inicializá-lo/destruí-lo se for ou não um acesso mobile.

@thejiren3889 2 года назад

Aí amigo você tem um vídeo específico de como fazer um conjunto de objetos dentro de uma nav por exemplo várias div dentro de uma nav se moverem só passando o dedo com javascript?

@dpwoficial 2 года назад

Ainda não temos.

@thejiren3889 2 года назад

@@dpwoficial seria foda fazer um vídeo onde vc criava um menu horizontal com vários quadrados q da pra rodar como carrossel eu sei q da pra usar esse gliter pra isso mas me tira uma dúvida como é que instala esse gliter na página HTML?

@dpwoficial 2 года назад

@@thejiren3889 O Glider é para fazer justamente isso que você está comentando. Chegou a assistir ao vídeo? Nele, explicamos como instalar e usar (com exemplos).

@thejiren3889 2 года назад

@@dpwoficial assistir até a metade mais ou menos só queria saber pq não consigo estilizar o tamanho da minha página da pra estilizar pelo css ou só pelo scss?

@dpwoficial 2 года назад

@@thejiren3889 Sass é só uma sintaxe mais eficiente para CSS. Não tem diferença no resultado final. Você consegue estilizar o tamanho da sua página sim: abre um documento NOVO e altera as propriedades; vai funcionar. Mas tem algo que você já escreveu impedindo isso de acontecer e é impossível saber o quê sem olhar o código.

@thejiren3889 2 года назад

Aí manito eu conseguir fazer esse carrossel na minha página HTML mas agora a estilização do body não está funcionando tipo eu tento colocar uma altura no meu body de 2000px; mas ela não funciona de jeito nenhum eu coloquei o código Java script na página HTML aí quando eu excluo ele a estilização do body pelo menos a altura volta a funcionar pode dizer qual é o problema?

@dpwoficial 2 года назад

Só de ler seu comentário, é impossível dizer qual é o problema. Coloca seu código no CodePen que a gente tenta dar uma olhada.

@gustavotheotonio 2 года назад

tu é muito brabo, mas esse coisa de ter que possuir um ambiente todo modelado por trás é muito ruim e acaba atrapalhando quem quer aprender algo simples.

@dpwoficial 2 года назад

Vlw, Gustavo. 👊 Não é obrigatório ter esse "ambiente todo modelado", ele é só para agilizar e dar mais dinamicidade ao tutorial, mas é possível fazer "do zero", assim como qualquer implementação js.

@danielluizpereira6403 2 года назад

Não consegui implementar no meu projeto já em andamento. Tem alguma dica? Tenho um carousel já pronto usando só CSS puro, preciso implementar algo mais bonito e modeno como essa sua dica.

@dpwoficial 2 года назад

Seguindo o que é mostrado no vídeo (importando os arquivos e fazendo a marcação correta), é para funcionar sem problemas. Se não funcionou, você esqueceu de alguma parte.

@danielluizpereira6403 2 года назад

@@dpwoficial To trabalhando com Svelte, é mesma coisa? Só seguir o video? O problema é que não sei exatamente onde colocar os arquivos e fazer as importações ;s

@dpwoficial 2 года назад

@@danielluizpereira6403 Procura sobre como usar a tag especial .

@xandmanuellara9861 3 года назад

Otimo video, poderia me dizer como faço pra aplicar o carrosel em 6 divs, 3 em cima e 3 em baixo (como uma matriz), e fazer passar na horizontal 2 divs cada?

@dpwoficial 3 года назад

Pensando rapidamente, seria a criação de 2 carousels (um "de cima" e outro "de baixo") que teriam um controlador único (usando os métodos da API para scroll).

@xandmanuellara9861 3 года назад

@@dpwoficial creio que seja isso, e como coloco o controlador unico? (Não conheco o metodo da API para scroll), tem alguma dica, ou video teu que fala sobre?

@dpwoficial 3 года назад

@@xandmanuellara9861 Em 23:35, mostro como usar o método de scrollar, mas dá uma olhada na documentação oficial que há muito mais possibilidades.