$(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'
});
}
이 지저분한 jquery를 덜 부풀어 오르고 반응하는 방법으로 어떻게 변환 할 수 있습니까?
-
29-07-2022 - |
문제
내 사이트에 일부 이벤트를 표시하기 위해 JQuery Cycle2와 Carousel 플러그인을 사용하고 있습니다. 모두 훌륭하게 작동하지만 가시 옵션이 태블릿 (768px와 1030px 사이)에서 5에서 3으로 변경 한 다음 전화기에서 1 (768px 미만)으로 변경되기를 원합니다. 다른 모든 옵션은 동일하게 유지 될 수 있습니다. 이 코드는 함께 해킹되고 지저분 해져서 더 좋은 방법을 찾고 있습니다. 또한 현재는 새로 고침 만 작동합니다. 괜찮지 만 크기를 조정할 때 다시로드하고 실시간으로 작업하면 좋을 것입니다. 내 현재 코드는 다음과 같습니다.
// 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'
});
}
}
해결책
다른 팁
다음은 코드의 "TRIMMED"버전입니다 ...
// 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);
}
내가 실제로 한 것은 사이클 옵션을 저장하는 변수를 만들고 각 너비와 관련된 1 개의 속성 만 변경하는 것입니다.
제휴하지 않습니다 StackOverflow