调整大小时滑块不能准确滑动

Question

我目前遇到的问题是在调整大小时尝试使滑块准确滑动。刷新浏览器时，响应滑块正常工作，然后才设置正确的值。但是当我调整浏览器窗口的大小或缩小时，它似乎没有准确地滑动。它给出了一个小的偏移量

class Home extends Component {
    constructor(props) {
        super(props);
            this.state = {
                count: 0
        }
        this.addOne = this.addOne.bind(this);
        this.addTwo = this.addTwo.bind(this);
        this.addTen = this.addTen.bind(this);
    }
    addOne() {
        this.setState({
            count: this.state.count + 1
        })
    }
    addFive() {
        this.setState({
            count: this.state.count + 5
        })
    }
    addTen() {
        this.setState({
            count: this.state.count + 10
        })
    }
    render() {
      return (
        <div className="App">
            <div className="home-intro">
                <h2>Welcome to Home Component</h2>
            </div>
            <div className="counter">
                <h3>Count: {this.state.count}</h3>
            </div>
            <div className="btn-group">
                <button onClick={this.addOne} className="btn blue-btn">Add 1</button>
                <button onClick={this.addFive} className="btn green-btn">Add 5</button>
                <button onClick={this.addTen} className="btn red-btn">Add 10</button>
            </div>
        </div>
      );
    }
}

$(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;
}

Answer 1

您可以移动代码“slider.prepend（$（'。slider-container .slider li：last'））;”退出功能responsiveCarousel。