Este artigo é um artigo espelhado de tradução automática, por favor clique aqui para ir para o artigo original.

Architect_Programmer_Code Rede Agrícola»Arquiteto › Design front-end & web › Html/CSS/JavaScript › JS se adapta ao gráfico de carrossel com tamanho de tela
Vista: 8656|Resposta: 0

[JavaScript] JS se adapta ao gráfico de carrossel com tamanho de tela

[Copiar link]
Publicado em 25/09/2020 10:15:17 | | | |
Requisitos: Ao acessar o terminal móvel, o gráfico do carrossel exibe apenas 1 conteúdo, quando está no terminal do tablet, exibe 2 conteúdos, e quando está no lado do PC, exibe 4 conteúdos.

Primeiro, sob as renderizações:



Sabemos que o bootstrap tem um sistema de grade, que pode se adaptar muito bem de acordo com o tamanho do dispositivo, o princípio é na verdade a mídia no CSS, mas minha função de carrossel usa o plugin Swiper, que é configurado de acordo com parâmetros js.

Swiper é um plug-in de efeito de deslizamento criado em javascript puro, para dispositivos móveis como celulares e tablets.
Sistema de grade bootstrap:



Detalhes:O login do hiperlink está visível.

Se você usar CSS puro, o código é o seguinte (não é para mim):

js é avaliado pelo método Window matchMedia(), e os parâmetros são ajustados e adaptados. O código é o seguinte:

(Fim)




Anterior:Threads .NET/C# capturam informações de exceção
Próximo:[Combate real] ASP.NET Core é baseado na venda flash de bloqueio distribuída da Redis
Disclaimer:
Todo software, material de programação ou artigos publicados pela Code Farmer Network são apenas para fins de aprendizado e pesquisa; O conteúdo acima não deve ser usado para fins comerciais ou ilegais, caso contrário, os usuários terão todas as consequências. As informações deste site vêm da Internet, e disputas de direitos autorais não têm nada a ver com este site. Você deve deletar completamente o conteúdo acima do seu computador em até 24 horas após o download. Se você gosta do programa, por favor, apoie um software genuíno, compre o registro e obtenha serviços genuínos melhores. Se houver qualquer infração, por favor, entre em contato conosco por e-mail.
Mail To:help@itsvse.com