|
Помогите пожалуйста разобраться со скриптом
Здравствуйте, у меня возникла небольшая проблема со слайдером, к сожалению я плохо разбираюсь в javascript/jQuery, приходится изучать так сказать "на ходу".
Суть проблемы: в шапке сайта есть слайдер, который "перелистывает" изображения через определенный промежуток времени (интервал, заданный в функции), все бы нечего, но в браузерах Chrome/Safari при переходе на другие вкладки, и последующем возврате на вкладку с сайтом, слайдер начинает крутиться с таймаутом в 1 секунду. Пока не наверстает упущенные прокручивания.
Я попыталась исправить баг, заменив функцию setInterval на setTimeout, но к сожалению проблема осталась, помогите пожалуйста решить данную проблему
Код с функцией setInterval:
jQuery(document).ready(function(){
function htmSlider(){
var slideWrap = jQuery('.b-slider-image');
var slideWidth = jQuery('.b-slide-item').outerWidth();
var scrollSlider = slideWrap.position().left - slideWidth;
timer = setInterval(function(){
slideWrap.animate({left: scrollSlider}, 1000, function(){
slideWrap
.find('.b-slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});
}, 5000);
}
htmSlider();
});
Код с функцией setTimeout:
jQuery(document).ready(function(){
function htmSlider(){
var slideWrap = jQuery('.b-slider-image');
var slideWidth = jQuery('.b-slide-item').outerWidth();
var scrollSlider = slideWrap.position().left - slideWidth;
timer = setTimeout(function run(){
slideWrap.animate({left: scrollSlider}, 1000, function(){
slideWrap
.find('.b-slide-item:first')
.appendTo(slideWrap)
.parent()
.css({'left': 0});
});
timer = setTimeout(run, 5000);
}, 5000);
}
htmSlider();
});
|
