如何使滑块上的动画更加流畅？

Question

I've just finished building my responsive slider from scratch. I've noticed it is not a seamless as it is. The way I've noticed is that it has some micro delays or stutters when sliding left and right.

 $(document).ready(function() { var carouselContainer = $('.carousel-container'), carousel = $('.carousel-container .carousel'), carouselItems = $('.carousel-container .carousel li'), count = carouselItems.length; function responsiveCarousel() { var carouselContainerWidth = carouselContainer.outerWidth(); //Add a Condition to display number of slides shown based on Screen/Browser Size if ($(window).width() < 480) { carouselItems.outerWidth( carouselContainerWidth / 1 ); } else if ($(window).width() < 560 ) { carouselItems.outerWidth( carouselContainerWidth / 2 ); } else { carouselItems.outerWidth( carouselContainerWidth / 5 ); } // Set Carousel Width by 'X' number of slides carousel.outerWidth( count*carouselContainerWidth ); //Offset Left var carouselItemsWidth = carouselItems.outerWidth(); var leftIndent = parseInt($(carouselItems).css('left')) - carouselItemsWidth; carousel.css({'left' : '-' + carouselItemsWidth + 'px' }); //Prepend Last Item carousel.prepend( $('.carousel-container .carousel li:last') ); $('.btns .next').on('click', function() { nextSlide(); }) $('.btns .prev').on('click', function() { prevSlide(); }) function nextSlide() { var move = parseInt($('.carousel-container .carousel').css('left')) - carouselItemsWidth; function animate(repeat, speed) { $('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() { $('.carousel-container .carousel').append( $('.carousel-container .carousel li:first') ); $('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' }); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }); } // Add a condition to adjust the slider based on the browser size if ($(window).width() < 480) { animate( 1, 100 ); } else if ($(window).width() < 560 ) { animate( 2, 100 ); } else { animate( 4, 100 ); } } function prevSlide() { var move = parseInt($('.carousel-container .carousel').css('left')) + carouselItemsWidth; function animate(repeat, speed) { $('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() { $('.carousel-container .carousel').prepend( $('.carousel-container .carousel li:last') ); $('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' }); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }) } // Add a condition to adjust the slider based on the browser size if ($(window).width() < 480) { animate( 1, 100 ); } else if ($(window).width() < 560 ) { animate( 2, 100 ); } else { animate( 4, 100 ); } } } responsiveCarousel(); $(window).resize(function() { responsiveCarousel(); }); }) 

 .wrapper { max-width : 1280px; margin : 0 auto; padding : 20px; } .carousel-wrap { padding : 0 50px; position : relative; } .btns { position : absolute; width : 100%; z-index : 10; top : 50%; width : 105%; top : 40px; left : 0; } .btns li { width : 35px; height : 40px; display : inline-block; cursor : pointer; position : absolute; } .next { right : 200px; } .carousel-container { float : left; position : relative; overflow : hidden; width : 100%; background-color : #fff; } .carousel { display : flex; flex-wrap : wrap; position : relative; } .carousel li { padding : 0px; height : 110px; margin : 10px 0; background-size : contain; background-repeat : no-repeat; background-position : center; padding : 0 0; box-sizing : border-box; height : 110px; position : relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper carousel-wrap"> <div class="carousel-container"> <ul class="carousel"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </div> <ul class="btns"> <li class="prev">prev</li> <li class="next">next</li> </ul> </div> 

Answer 1

Added a css transition, not sure if that's what you are looking for;

 $(document).ready(function() { var carouselContainer = $('.carousel-container'), carousel = $('.carousel-container .carousel'), carouselItems = $('.carousel-container .carousel li'), count = carouselItems.length; function responsiveCarousel() { var carouselContainerWidth = carouselContainer.outerWidth(); //Add a Condition to display number of slides shown based on Screen/Browser Size if ($(window).width() < 480) { carouselItems.outerWidth( carouselContainerWidth / 1 ); } else if ($(window).width() < 560 ) { carouselItems.outerWidth( carouselContainerWidth / 2 ); } else { carouselItems.outerWidth( carouselContainerWidth / 5 ); } // Set Carousel Width by 'X' number of slides carousel.outerWidth( count*carouselContainerWidth ); //Offset Left var carouselItemsWidth = carouselItems.outerWidth(); var leftIndent = parseInt($(carouselItems).css('left')) - carouselItemsWidth; carousel.css({'left' : '-' + carouselItemsWidth + 'px' }); //Prepend Last Item carousel.prepend( $('.carousel-container .carousel li:last') ); $('.btns .next').on('click', function() { nextSlide(); }) $('.btns .prev').on('click', function() { prevSlide(); }) function nextSlide() { var move = parseInt($('.carousel-container .carousel').css('left')) - carouselItemsWidth; function animate(repeat, speed) { $('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() { $('.carousel-container .carousel').append( $('.carousel-container .carousel li:first') ); $('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' }); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }); } // Add a condition to adjust the slider based on the browser size if ($(window).width() < 480) { animate( 1, 100 ); } else if ($(window).width() < 560 ) { animate( 2, 100 ); } else { animate( 4, 100 ); } } function prevSlide() { var move = parseInt($('.carousel-container .carousel').css('left')) + carouselItemsWidth; function animate(repeat, speed) { $('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() { $('.carousel-container .carousel').prepend( $('.carousel-container .carousel li:last') ); $('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' }); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }) } // Add a condition to adjust the slider based on the browser size if ($(window).width() < 480) { animate( 1, 100 ); } else if ($(window).width() < 560 ) { animate( 2, 100 ); } else { animate( 4, 100 ); } } } responsiveCarousel(); $(window).resize(function() { responsiveCarousel(); }); }) 

 .wrapper { max-width : 1280px; margin : 0 auto; padding : 20px; } .carousel-wrap { padding : 0 50px; position : relative; } .btns { position : absolute; width : 100%; z-index : 10; top : 50%; width : 105%; top : 40px; left : 0; } .btns li { width : 35px; height : 40px; display : inline-block; cursor : pointer; position : absolute; } .next { right : 200px; } .carousel-container { float : left; position : relative; overflow : hidden; width : 100%; background-color : #fff; } .carousel { display : flex; flex-wrap : wrap; position : relative; transition: ease-in-out 1s; } .carousel li { padding : 0px; height : 110px; margin : 10px 0; background-size : contain; background-repeat : no-repeat; background-position : center; padding : 0 0; box-sizing : border-box; height : 110px; position : relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper carousel-wrap"> <div class="carousel-container"> <ul class="carousel"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> </ul> </div> <ul class="btns"> <li class="prev">prev</li> <li class="next">next</li> </ul> </div> 

Answer 2

rather than having JS to animate, use css to do it. transition in css is way better than animation in js