0
サイズ変更時にスライダを正確にスライドさせる際に問題が発生しています。応答スライダーは、ブラウザをリフレッシュするときに正しく動作します。その後、適切な値が設定されます。しかし、ブラウザウィンドウのサイズを変更したり縮小したりすると、正確にスライドしないように見えます。 "（： '）最後。スライダコンテナ.slider李を' $（）slider.prepend;" それはあなたがコードを移動することができ、小さなオフセットサイズ変更時にスライダが正確にスライドしない
$(document).ready(function() {
\t
\t var sliderContainer = $('.slider-container');
\t var slider = $('.slider-container .slider');
\t var sliderItems = $('.slider-container .slider li');
\t var count = sliderItems.length;
function responsiveCarousel() {
\t var sliderContainerWidth = sliderContainer.width();
\t //Set Slider Items Width
\t \t sliderItems.width(sliderContainerWidth/4);
\t // Set Slider Wrapper Width
\t \t // $('.slider-container ul.slider').children().each(function() {
\t // sliderWidth += $(this).outerWidth();
\t // slider.width(sliderWidth + 200);
\t \t // });
\t \t // Set slider by 'X' number of slides
\t \t slider.width(count*sliderContainerWidth);
\t \t //Offset Left
\t \t var sliderItemsWidth = sliderItems.outerWidth(true);
\t \t var leftIndent = parseInt($(sliderItems).css('left')) - sliderItemsWidth;
\t \t //Prepend Last Item
\t \t slider.prepend($('.slider-container .slider li:last'));
\t \t slider.css({'left' : '-' + sliderItemsWidth + 'px' });
\t \t $('.btns .next').on('click', function() {
\t \t \t var move = parseInt($('.slider-container .slider').css('left')) - sliderItemsWidth;
\t \t \t function animate(repeat, speed) {
\t \t \t $('.slider-container .slider:not(:animated)').animate({ 'left' : move }, speed, function() {
\t \t \t \t $('.slider-container .slider').append($('.slider-container .slider li:first'));
\t \t \t \t $('.slider-container .slider').css({ 'left' : '-' + sliderItemsWidth + 'px' });
\t \t \t \t if (repeat > 1) {
\t \t \t \t \t animate((repeat - 1), speed);
\t \t \t \t }
\t \t \t });
\t \t \t }
\t \t \t animate(4, 100);
\t \t });
\t \t $('.btns .prev').on('click', function() {
\t \t var move = parseInt($('.slider-container .slider').css('left')) + sliderItemsWidth;
\t \t function animate(repeat, speed) {
\t \t \t $('.slider-container .slider:not(:animated)').animate({ 'left' : move }, speed, function() {
\t \t \t \t $('.slider-container .slider').prepend($('.slider-container .slider li:last'));
\t \t \t \t $('.slider-container .slider').css({ 'left' : '-' + sliderItemsWidth + 'px' });
\t \t \t \t if (repeat > 1) {
\t \t \t \t \t animate((repeat - 1), speed );
\t \t \t \t }
\t \t \t })
\t \t }
\t \t animate(4, 100);
\t \t })
\t }
\t responsiveCarousel();
\t $(window).resize(function() {
\t \t responsiveCarousel();
\t })
})
\t/* 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 {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t 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">
\t <div class="slider-container">
\t <ul class="slider">
\t <li>1</li>
\t <li>2</li>
\t <li>3</li>
\t <li>4</li>
\t <li>1</li>
\t <li>2</li>
\t <li>3</li>
\t <li>4</li>
\t <li>1</li>
\t <li>2</li>
\t <li>3</li>
\t <li>4</li>
\t </ul>
\t <ul class="btns">
\t <li class="prev">prev</li>
\t <li class="next">next</li>
\t </ul>
\t </div>
</div>