Fala pessoal da comunidade!
Gostaria de saber se existe um código que adapte o tamanho do banner para desktop conforme o tamanho da tela. Estou tirando de exemplo a loja da Soldier Nutrition, onde reparei que em monitores maiores a proporção dos banners abre em 1920x450 (se não me engano) e monitores menores, como notebook 1920x365! Teria algum código que faça essa adaptação?
@Leonardo_Vicentini_F
Se puder me ajudar nessa, vejo que você é expert!
Tecnicamente o seu banner ta funcionando quase da mesma maneira que o dele. A única diferença notável que percebi é só o Banner mobile mesmo.
Tenta isso aqui, vê se funciona:
<style>
.banners-full .slick-list {
position: relative;
overflow: hidden;
}
.banners-full .slick-track {
display: flex;
}
.banners-full .slick-slide {
display: flex;
justify-content: center;
align-items: center;
}
.banners-full .slick-slide img {
width: 100%;
height: auto;
max-height: 100%;
}
</style>
<script>
$(window).on('resize', function() {
$('.banners-full').slick('setPosition');
});
</script>
Para o banner mobile, ó usar o próprio script do Leonardo e aumentar de 767 para um outro número que achar melhor (esse site da soldier faz a troca com 1024px).
Fala Teus, no mobile eu não coloquei o banner ainda, nem que seja o teste! O próprio tema meu, que é igual este da Soldier já tem está função. Só notei essa diferença de monitores o banner fica de tamanhos diferentes dos deles, achei interessante que o deles adapta conforme o monitor. Tenho 3 tamanhos de monitores aqui na empresa, e os deles adapta certinho com cada monitor. Vou testar esse script e te falo!
Vou te mandar os tamanho dos monitores que estou tendo como exemplo!
Este monitor 1680x1050:
Nesse nota-se mais diferença, 1366x768:
Teoricamente está ok, não? Vi que só ta com problema no resize. Testei em diversos viewports e está respondendo bem.
$(document).ready(function() {
$('.banners-full').slick({
});
$(window).on('resize', function() {
$('.banners-full').slick('setPosition');
});
});
Substitui!
A altura dos banners é de 510px enquanto a sua é de 430px.
Agora acho que vou conseguir te explicar melhor minha dúvida inicial!
Tela 1680x1050, repare que o Rendered Size fica 1680x446
Tela 1366x768, repare que o Rendered Size fica 1366x363
Agora eu entendi! Valida o script por favor. Coloquei prints do funcionamento!
OBS: Recomendo criar os banners todos em 1920x510.
function atualizarBanners() {
const banners = $('.banner-full img');
let screenWidth = $(window).width();
let width = Math.min(screenWidth, 1920);
let height = Math.round(width * (510 / 1920));
let newSize = `${width}x${height}`;
banners.each(function () {
let currentSrc = $(this).attr('src');
if (!currentSrc.includes(newSize)) {
let updatedSrc = currentSrc.replace(/(\d{3,4}x\d{2,4})/, newSize);
$(this).attr('src', updatedSrc);
}
});
}
$(document).ready(function () {
atualizarBanners(); //
$(window).on('resize', function () {
atualizarBanners(); //
});
});
Script não funcionou Teus
Vi que colocou errado a opção, acredito que tenha colocado como HTML. O código em si é somente javascript, caso queira usar como HTML tem que abrir a tag script no começo do código e fechar com </script. > ao final.
Quando corrigir e mesmo assim não funcionar, tenta o código abaixo. Esses temas da groomb tem muita frescura as vezes pra rodar algum código por cima, dependendo tenho até que setar um timeout.
$(document).ready(function () {
function atualizarBanners() {
const banners = $('.banner-full img');
let screenWidth = $(window).width();
let width = Math.min(screenWidth, 1920);
let height = Math.round(width * (510 / 1920));
let newSize = `${width}x${height}`;
banners.each(function () {
let currentSrc = $(this).attr('src');
if (!currentSrc.includes(newSize)) {
let updatedSrc = currentSrc.replace(/(\d{3,4}x\d{2,4})/, newSize);
$(this).attr('src', updatedSrc);
}
});
}
atualizarBanners();
$(window).on('resize', function () {
atualizarBanners();
});
});
Cara, maravilha! Funcionou perfeitamente do jeito que gostaria! Só que deu um leve erro, as categorias ficaram mais espaçadas e consequentemente nesse monitor ela deu quebra de linha:
Eu vi que eles fazem o mesmo jeito no mobile, cada tela adapta o tamanho. Teria algum script também? Ou esse mesmo script irá adaptar?
Que resolução é essa? Testei em diversos monitores aqui e nenhuma resolução apareceu esse deslocamento de menu (tenta dar um CTRL + F5). Até mesmo porque o banner não envolve em nada o menu, seria bacana retirar o script e revalidar essa questão.
A respeito do script, teria também que fazer outro para o mobile porque ele ta trabalhando com a resolução base de 1920x1050. Aí no caso seria um script dividido para o mobile e desktop.
Deu certo, obrigado Teus!! Deus lhe abençoe!
