Баг с прокруткой

122
08 июня 2019, 03:10

Суть проблемы в том что если перейти на любую другую вкладку в браузере а вкладку со скриптом не закрывать то когда возвращаешься на вкладку со скриптом он начинает супер быстро пролистывать блоки как будто догонят то время которые ты проводил на второй вкладке.

<div class="carousel"> 
  <div class="carousel-button-left"><a href="#"></a></div> 
  <div class="carousel-button-right"><a href="#"></a></div> 
    <div class="carousel-wrapper"> 
       <div class="carousel-items"> 
          <div class="carousel-block">
                <img src="images/1.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/2.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/3.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/4.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/5.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/6.jpg" alt="" />
          </div>
          <div class="carousel-block">
                <img src="images/7.jpg" alt="" />
          </div>            
          <div class="carousel-block"> 
                <img src="images/8.jpg" alt="" />
          </div>
       </div>
    </div>

<style>
        .carousel  {
       max-width: 1080px; 
       margin: 50px auto;
       width:100%;
    }
    .carousel-wrapper {
       margin: 10px 30px; 
       overflow: hidden;
       position:relative;
    }
    .carousel-items {
       width: 10000px;
       position: relative; 
    }
    .carousel-block {
       float: left; 
       width: 250px; 
       padding: 10px 10px 10px 0px; 
    }
    .carousel-block img{
        display:block;
    }
    .carousel-button-left a, .carousel-button-right a{
       width: 25px; 
       height: 36px; 
       position: relative;
       top: 80px; 
       cursor: pointer; 
       text-decoration:none;
    }
    .carousel-button-left a{
       float: left; 
       background: url(../images/carousel-left.png); 
    }
    .carousel-button-right a{
       float: right;
       background: url(../images/carousel-right.png); 
    }
   </style>

<script>
    //Обработка клика на стрелку вправо
    $(document).on('click', ".carousel-button-right",function(){ 
        var carusel = $(this).parents('.carousel');
        right_carusel(carusel);
        return false;
    });
    //Обработка клика на стрелку влево
    $(document).on('click',".carousel-button-left",function(){ 
        var carusel = $(this).parents('.carousel');
        left_carusel(carusel);
        return false;
    });
    function left_carusel(carusel){
       var block_width = $(carusel).find('.carousel-block').outerWidth();
       $(carusel).find(".carousel-items .carousel-block").eq(-1).clone().prependTo($(carusel).find(".carousel-items")); 
       $(carusel).find(".carousel-items").css({"left":"-"+block_width+"px"});
       $(carusel).find(".carousel-items .carousel-block").eq(-1).remove();    
       $(carusel).find(".carousel-items").animate({left: "0px"}, 200); 
    }
    function right_carusel(carusel){
       var block_width = $(carusel).find('.carousel-block').outerWidth();
       $(carusel).find(".carousel-items").animate({left: "-"+ block_width +"px"}, 200, function(){
          $(carusel).find(".carousel-items .carousel-block").eq(0).clone().appendTo($(carusel).find(".carousel-items")); 
          $(carusel).find(".carousel-items .carousel-block").eq(0).remove(); 
          $(carusel).find(".carousel-items").css({"left":"0px"}); 
       }); 
    }
    $(function() {
         auto_right('.carousel:first');
    })
    // Автоматическая прокрутка
    function auto_right(carusel){
        setInterval(function(){
            if (!$(carusel).is('.hover'))
                right_carusel(carusel);
        }, 1000)
    }
    // Навели курсор на карусель
    $(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')})
    //Убрали курсор с карусели
    $(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')})
   </script>
READ ALSO
Изображение на всю высоту в правом блоке

Изображение на всю высоту в правом блоке

Помогите пожалуйста приклеить изображение в правый блок на всю высоту экрана, с нулевыми отступами, как на изображенииВозможно без использование...

155
Atom автокомплит JavaScript в HTML файлах

Atom автокомплит JavaScript в HTML файлах

Подскажите, можно ли как-то настроить автокомплит js в файлах HTML? Я уже всякое перепробовал и ничего не получаетсяКогда создаю файл

141