Case Study:
- Implementing a background-image slider with JQuery listening for window resizing.
- Depending on the screen size, a specific array is set as the image file paths source.
- Encountering a 6-second delay issue where the initial image does not display correctly.
- Efforts to resolve it led to the first image displaying twice instead of cycling through the array sequentially.
$(function(){
var img_41 = "url('https://s33.postimg.org/e11jeeisv/lagoon-467.jpg')",
img_42 = "url('https://s33.postimg.org/68avmepof/christmas-467.jpg')",
img_43 = "url('https://s33.postimg.org/cyrcvu54f/cars-467.jpg')",
img_1 = "url('https://s33.postimg.org/vr37zgr8v/lagoon-720.jpg')",
img_2 = "url('https://s33.postimg.org/mw2doxfb3/christmas-720.jpg')",
img_3 = "url('https://s33.postimg.org/f3bpwyorj/cars-720.jpg')",
img_91 = "url('https://s33.postimg.org/qsfpkxv5r/lagoon-991.jpg')",
img_92 = "url('https://s33.postimg.org/5is3a2rpr/christmas-991.jpg')",
img_93 = "url('https://s33.postimg.org/a4o7ieidr/cars-991.jpg')",
slider1 =[img_1, img_2, img_3],
slider2 =[img_41, img_42, img_43],
slider3 =[img_91, img_92, img_93],
i =0;
var $target = $('.wrapper');
var $win=$(window);
var arr;
$win.on('resize', function() {
var screen= $win.width();
if(screen < 468){
arr = slider2;
}
else if(screen > 991){
arr = slider3;
}
else{
arr = slider1;
}
$target.css({
'background-repeat':'no-repeat',
'background-position': 'center center',
'display':'block'
});
}).resize();
setInterval(function() {
$target.animate({ opacity: 0 }, 500, function() {
console.log(arr[i]);
$target.css('background-image', arr[i]);
i++;
$target.animate({ opacity: 1 }, 500, function() {
if(i === arr.length) i = 0;
});
});
}, 6000);
});