A bug in the slider when switching browser tabs?

Question

JavaScript

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);
}

and html

<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 1

@mmetro