Tell me how to make a smooth continuous scrolling of images
//Обработка клика на стрелку вправо $(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); }, 2000) } // Навели курсор на карусель $(document).on('mouseenter', '.carousel', function(){$(this).addClass('hover')}) //Убрали курсор с карусели $(document).on('mouseleave', '.carousel', function(){$(this).removeClass('hover')}) </script> .p-smi{ width: 707px; height: 130px; margin-left: 358px; background-color: #e8e8e8; margin-top: 69px; box-shadow: 0px 0px 12px 0px #000000; font-family: Calibri; font-size: 18pt; color: black; padding: 7px 0 0 0; } .carousel { max-width: 1080px; margin-left: -5px; width: 720px;} .carousel-wrapper { /* margin: 10px 30px; отступы для стрелок */ overflow: hidden; /* скрываем содержимое, выходящее за рамки основной области */ position:relative; } .carousel-items { width: 10000px; /* устанавливаем большую ширину для набора элементов */ position: relative; /* позиционируем блок относительно основной области карусели */ } .carousel-block { float: left; width: 159px; padding: 10px 10px 10px 0px; } .carousel-block img{ display:block; } /*********** BUTTONS ***********/ .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); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="p-smi"> <div class="carousel shadow"> <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"> 1 </div> <div class="carousel-block"> 2 </div> <div class="carousel-block"> 3 </div> <div class="carousel-block"> 4 </div> <div class="carousel-block"> 5 </div> <div class="carousel-block"> 6 </div> <div class="carousel-block"> 7 </div> <div class="carousel-block"> 8 </div> </div> </div> </div> </div> 
