$(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 Plugin لعرض بعض الأحداث على موقعي. كل شيء يعمل بشكل رائع ولكني أريد أن يتغير الخيار المرئي من 5 إلى 3 على أقراص (بين 768 بكسل و 1030 بكسل) ثم يصل إلى 1 على الهواتف (أقل من 768 بكسل). جميع الخيارات الأخرى يمكن أن تظل كما هي. يتم اختراق هذا الرمز معًا وفوضويًا ، لذلك أبحث عن طريقة أفضل للقيام بذلك. أيضا ، حاليا يعمل فقط على التحديث. هذا جيد ، ولكن سيكون من الجيد أن يتم إعادة تحميله وعمل في الوقت الفعلي عند تغيير حجمه. هذا هو الكود الحالي الخاص بي:
// 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'
});
}
}
المحلول
نصائح أخرى
إليك نسخة "مقلدة" من الرمز ...
// 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);
}
كل ما فعلته حقًا هو إنشاء متغير لتخزين خيارات الدورة ، وتغيير خاصية واحدة فقط ذات الصلة بكل عرض.
لا تنتمي إلى StackOverflow