Answer the question
In order to leave comments, you need to log in
A bug in the slider when switching browser tabs?
Such a problem, if you switch to another tab in the browser, and then return to the tab with the slider, it becomes frantic and flatters at breakneck speed, and it cannot be stopped, even mouseenter does not work, here is the script:
var slideWidth=1000;
var sliderTimer;
$(function(){
$('.slide:first .slidetext div').show();
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
sliderTimer=setInterval(nextSlide,3000);
$('.viewport').hover(function(){
clearInterval(sliderTimer);
},function(){
sliderTimer=setInterval(nextSlide,3000);
});
$('#next_slide').click(function(){
clearInterval(sliderTimer);
nextSlide();
sliderTimer=setInterval(nextSlide,3000);
});
$('#prev_slide').click(function(){
clearInterval(sliderTimer);
prevSlide();
sliderTimer=setInterval(nextSlide,3000);
});
});
$(".viewport").mouseenter(function () {
clearInterval(theInt);
}).mouseleave(function () {
theInterval();
});
function nextSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide++;
if(currentSlide>=$('.slidewrapper').children().size())
{
currentSlide=0;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},500,function(){
//скрываем отыгранные тексты на всех слайдах
$('.slide .slidetext div').hide();
//отыгрываем эффект для текста на текущем слайде
$('.slide:eq('+currentSlide+') .slidetext div').each(function(){
$(this).show();
$(this).data('width',$(this).width());
$(this).css({overflow: 'hidden',width: 0}).animate({width: $(this).data('width')},500);
});
}).data('current',currentSlide);
}
function prevSlide(){
var currentSlide=parseInt($('.slidewrapper').data('current'));
currentSlide--;
if(currentSlide<0)
{
currentSlide=$('.slidewrapper').children().size()-1;
}
$('.slidewrapper').animate({left: -currentSlide*slideWidth},500,function(){
//скрываем отыгранные тексты на всех слайдах
$('.slide .slidetext div').hide();
//отыгрываем эффект для текста на текущем слайде
$('.slide:eq('+currentSlide+') .slidetext div').each(function(){
$(this).show();
$(this).data('width',$(this).width());
$(this).css({overflow: 'hidden',width: 0}).animate({width: $(this).data('width')},500);
});
}).data('current',currentSlide);
}
<div class="viewport">
<ul class="slidewrapper" data-current=0>
<li class="slide">
<div class='slidetext'>
<div>::текст</div>
<div>/ текст</div>
<div>текст</div>
</div>
<a href="#"><img src="images/img-1.jpg"></a>
</li>
<li class="slide">
<div class='slidetext'>
<div>::текст</div>
<div>/ текст</div>
<div>текст</div>
</div>
<a href="#"><img src="images/img-2.jpg"></a>
</li>
<li class="slide">
<div class='slidetext'>
<div>::текст</div>
<div>/ текст</div>
<div>текст</div>
</div>
<a href="#"><img src="images/img-3.jpg"></a>
</li>
</ul>
<a href='javascript: void(0)' id='prev_slide' class='prev_s'></a>
<a href='javascript: void(0)' id='next_slide' class='next_s'></a>
</div>
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question