0
コンテンツカルーセルを作成しようとしています。最初に表示されるスライドの量は、トレースされた幅に応じて変更する必要があります（ ".container"）要素の幅に応じてスライド数を変更してください
現在、ユーザーがページを更新するとすべて動作します。私はその場でスライドの量を変更したいと思います。
例：景観タブレット上 は、ユーザーが肖像画にタブレットの位置を変更したときに、4枚のスライドを示すだろう - スライド量は、ユーザーがブラウザのウィンドウサイズを変更した場合、同じことが起こるはず2
に変更する必要があります。最初は幅が6つのスライドをサポートすることができました。ウィンドウのサイズ変更後、3つしかサポートできませんでした。変更は、ページを更新することによって（オンザフライで）行う必要があります。 、新しい番号のスライドに調整した表示を取得するには
$(document).ready(function() {
function Carousel() {
var body_size, resizeTimer, slidesInView;
function setContainerWidth() {
body_size = $('.container').width();
slidesInView = body_size <= 640 ? 1 //Less than or equal to 980
:
body_size <= 980 ? 2 //Less than or equal 640
:
6;
}
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(setContainerWidth, 200);
});
setContainerWidth();
console.log(body_size);
console.log(slidesInView);
var slideMargin = 30; // margin between sides. sum of both sides.
var SlideBlockWidth = ($(".carousel-list li").outerWidth() + slideMargin) * slidesInView;
// Set Width for slides direct wrapper.
$(".inner-carousel").css("width", SlideBlockWidth);
//Move he last list item before the first item.
$('.carousel-list li:first').before($('.carousel-list li:last'));
$('.next').click(function() {
// Get the width of the items (width + margin)
var item_width = $('.carousel-list li').outerWidth() + slideMargin;
// Calculate the new left indent of the unordered list
var left_indent = parseInt($('.carousel-list').css('left')) - item_width;
//make the sliding effect using jquery's animate function
$('.carousel-list:not(:animated)').animate({
'left': left_indent
}, 500, function() {
//Make infinite carousel
$('.carousel-list li:last').after($('.carousel-list li:first'));
//and get the left indent to the default -235px
$('.carousel-list').css({
'left': '-235px'
});
});
});
$('.prev').click(function() {
var item_width = $('.carousel-list li').outerWidth() + slideMargin;
var left_indent = parseInt($('.carousel-list').css('left')) + item_width;
$('.carousel-list:not(:animated)').animate({
'left': left_indent
}, 500, function() {
/* when sliding to left we are moving the last item before the first list item */
$('.carousel-list li:first').before($('.carousel-list li:last'));
/* and again, when we make that change we are setting the left indent of our unordered list to the default -210px */
$('.carousel-list').css({
'left': '-235px'
});
});
});
} //carousel
Carousel();
});html {
background: #1b1b1b;
}
.button-container {
display: block;
}
.button {
width: 200px;
height: 50px;
line-height: 50px;
background: #ddd;
text-align: Center;
font-size: 2rem;
cursor: pointer;
display: inline-block;
margin-top: 20px;
}
.carousel-wrap {
position: relative;
border: 1px solid #ddd;
text-align: center;
}
.inner-carousel {
width: 1410px;/* important (this width = width of list item(including margin) * items shown */
overflow: hidden;/* important (hide the items outside the div) */
display: inline-block;
background: #F0F0F0;
text-align: left;
}
.inner-carousel::after {
content: '';
display: block;
clear: both;
}
.carousel-list {
position: relative;
left: -235px;
list-style-type: none;
margin: 0px;
padding: 0px;
width: 9999px;
font-size: 0;
}
.carousel-list li {
display: inline-block;
width: 205px;
height: 200px;
background: #000000;
color: #fff;
font-size: 5rem;
text-align: center;
box-sizing: border-box;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
line-height: 200px;
margin: 0 15px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="container">
<section class="carousel-wrap">
<div class="inner-carousel">
<ul class="carousel-list">
<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>
<!--/inner-carousel-->
<div class="button-container">
<div class="prev button">◄</div>
<div class="next button">►</div>
</div>
</section>
<!--/carousel-wrap-->
</div>
<!--/container-->
今、私が望んでいたまさにありません。本当にありがとうございました。 – user7121582