$(document).ready(adjustEvents);
$(window).on('resize orientationchange', adjustEvents);
function adjustEvents() {
var ww = document.body.clientWidth,
vis = ww > 1030 ? 5 : (ww >= 768 ? 3 : 1);
$('.cycle').cycle({
fx : 'carousel',
swipe : true,
timeout : 5000,
slides : '> article',
carouselVisible : vis,
carouselFluid : true,
autoHeight : 'calc',
prev : '#prev',
next : '#next'
});
}
Como posso converter este jQuery bagunçado para ser menos inchado e responsivo
-
29-07-2022 - |
Pergunta
Estou usando o JQuery Cycle2 e o plug -in do carrossel para exibir alguns eventos no meu site. Tudo funciona muito bem, mas eu quero que a opção visível mude de 5 para 3 em tablets (entre 768px e 1030px) e depois até 1 em telefones (menos de 768px). Todas as outras opções podem permanecer as mesmas. Esse código é hackeado e bagunçado, então estou procurando uma maneira melhor de fazê -lo. Além disso, atualmente funciona apenas no Atualização. Tudo bem, mas seria bom se ele recarregasse e trabalhasse em tempo real quando você redimensionou. Aqui está o meu código atual:
// Events
var ww = document.body.clientWidth;
$(document).ready(function() {
adjustEvents();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustEvents();
});
var adjustEvents = function() {
if (ww > 1030) {
$('.cycle').cycle({
fx:'carousel',
swipe:true,
timeout:5000,
slides:'> article',
carouselVisible:5,
carouselFluid:true,
autoHeight:'calc',
prev:'#prev',
next:'#next'
});
}
else if (ww >= 768) {
$('.cycle').cycle({
fx:'carousel',
swipe:true,
timeout:5000,
slides:'> article',
carouselVisible:3,
carouselFluid:true,
autoHeight:'calc',
prev:'#prev',
next:'#next'
});
}
else if (ww < 768) {
$('.cycle').cycle({
fx:'carousel',
swipe:true,
timeout:5000,
slides:'> article',
carouselVisible:1,
carouselFluid:true,
autoHeight:'calc',
prev:'#prev',
next:'#next'
});
}
}
Solução
Outras dicas
Aqui está uma versão "aparada" do código ...
// Events
var ww = document.body.clientWidth;
$(document).ready(function() {
adjustEvents();
})
$(window).bind('resize orientationchange', function() {
ww = document.body.clientWidth;
adjustEvents();
});
var adjustEvents = function() {
var options = {
fx:'carousel',
swipe:true,
timeout:5000,
slides:'> article',
carouselFluid:true,
autoHeight:'calc',
prev:'#prev',
next:'#next'
}
if (ww > 1030) {
options.carouselVisible = 5;
}
else if (ww >= 768) {
options.carouselVisible = 3;
}
else if (ww < 768) {
options.carouselVisible = 1;
}
$('.cycle').cycle(options);
}
Tudo o que eu realmente fiz foi criar uma variável para armazenar as opções de ciclo e alterar apenas a propriedade 1 que era relevante para cada largura.