調整大小時滑塊無法正確滑動

Question

我目前在嘗試在調整大小時准確地使滑塊滑動時遇到問題。 刷新瀏覽器時，響應式滑塊可以正常工作，只有這樣才能設置適當的值。 但是，當我調整瀏覽器窗口的大小或縮小時，它似乎無法正確滑動。 它提供了一個小的偏移

 $(document).ready(function() { var sliderContainer = $('.slider-container'); var slider = $('.slider-container .slider'); var sliderItems = $('.slider-container .slider li'); var count = sliderItems.length; function responsiveCarousel() { var sliderContainerWidth = sliderContainer.width(); //Set Slider Items Width sliderItems.width( sliderContainerWidth / 4 ); // Set Slider Wrapper Width // $('.slider-container ul.slider').children().each(function() { // sliderWidth += $(this).outerWidth(); // slider.width( sliderWidth + 200 ); // }); // Set slider by 'X' number of slides slider.width( count*sliderContainerWidth ); //Offset Left var sliderItemsWidth = sliderItems.outerWidth(true); var leftIndent = parseInt($(sliderItems).css('left')) - sliderItemsWidth; //Prepend Last Item slider.prepend( $('.slider-container .slider li:last') ); slider.css({'left' : '-' + sliderItemsWidth + 'px' }); $('.btns .next').on('click', function() { var move = parseInt($('.slider-container .slider').css('left')) - sliderItemsWidth; function animate(repeat, speed) { $('.slider-container .slider:not(:animated)').animate({ 'left' : move }, speed, function() { $('.slider-container .slider').append( $('.slider-container .slider li:first') ); $('.slider-container .slider').css({ 'left' : '-' + sliderItemsWidth + 'px' }); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }); } animate( 4, 100 ); }); $('.btns .prev').on('click', function() { var move = parseInt($('.slider-container .slider').css('left')) + sliderItemsWidth; function animate(repeat, speed) { $('.slider-container .slider:not(:animated)').animate({ 'left' : move }, speed, function() { $('.slider-container .slider').prepend( $('.slider-container .slider li:last') ); $('.slider-container .slider').css({ 'left' : '-' + sliderItemsWidth + 'px' }); if ( repeat > 1 ) { animate( ( repeat - 1 ), speed ); } }) } animate( 4, 100 ); }) } responsiveCarousel(); $(window).resize(function() { responsiveCarousel(); }) }) 

 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } .wrapper { max-width : 1280px; margin : 0 auto; padding : 0 20px; } .timeline-container { max-width : 720px; background-color : beige; margin : 0 auto; } .timeline-slider { width : 100%; overflow : hidden; } .slider { overflow : hidden; position : relative; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; transition: all 0.3s linear } .slider li { float : left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="slider-container"> <ul class="slider"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <ul class="btns"> <li class="prev">prev</li> <li class="next">next</li> </ul> </div> </div> 

Answer 1

您可以移動代碼“ slider.prepend（$（'。slider-container .slider li：last'））;”。 超出功能Carousel。