This question has already been answered:

I can not understand how to make a smooth continuous scrolling carousel

//ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΊΠ»ΠΈΠΊΠ° Π½Π° стрСлку Π²ΠΏΡ€Π°Π²ΠΎ $(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>

Reported as a duplicate by the participants Duck Learns to Hide , Grundy , cheops , tutankhamun , aleksandr barakin 13 Sep '16 at 6:59 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

  • Creating a double does not increase the chance of answering a question. - Duck Learns to Take Cover
  • 7
    Full take of the same author's question: ru.stackoverflow.com/questions/565170/… - Duck Learns to Take Cover
  • As it is not sad, but increases ... I did not see a double, but I saw this question - Alexey Prokopenko
  • @AlexeyProkopenko, if you need to raise a question, you can fix it and it will pop up. Or bounty hang, if the reputation is enough. - Duck Learns to Take Cover

1 answer 1

Add the easing = 'lenear' parameter to the animate function and set the delay between animations equal to the duration of the animation. Then the scrolling will be smooth and the scrolling speed will be set by the speed parameter in the animate function .

animate

 var duration = 1000 //ΠžΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° ΠΊΠ»ΠΈΠΊΠ° Π½Π° стрСлку Π²ΠΏΡ€Π°Π²ΠΎ $(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"}, duration, 'linear', 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); }, duration) } // НавСли курсор Π½Π° ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ $(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>

  • Interval without timeout? You even hung up my browser. - Artem Gorlachev
  • one
    Indeed, I did not pay attention that this is an interval, not a timeout. Corrected - Alexey Prokopenko
  • everything is good, but for some reason my picture on the left is going away normally, and when it appears at the far right, it does not flip until it eats away a block of rfhnbryqj 150px - Aslero
  • understood my mistake, thank you all so much - Aslero
  • one
    Have you solved your problem? - Alexey Prokopenko