根据元素宽度更改幻灯片数

Question

我正在尝试创建内容轮播。最初可见的幻灯片数量应根据跟踪宽度（“.container”）进行更改

当前，如果用户刷新页面，所有内容都可以使用。我想在飞行中更改幻灯片的数量。

例子： 景观平板电脑将显示4张幻灯片，当用户改变平板电脑的位置，以人像 - 滑动量应更改为2

相同的，如果用户改变浏览器窗口大小应该发生。最初宽度可以支持6张幻灯片，在窗口大小调整后，它可以支持三个。更新应该刷新页面（即时）。

请参阅片断如下：

$(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">&#x25c4;</div> 
 
     <div class="next button">&#x25ba;</div> 
 
    </div> 
 
    </section> 
 
    <!--/carousel-wrap--> 
 

 
</div> 
 
<!--/container-->

Answer 1

，以获得显示调整到新号码的幻灯片，只需将下面的进线setContainerWidth功能：

var slideBlockWidth = ($(".carousel-list li").outerWidth() + slideMargin) * slidesInView; 
// Set Width for slides direct wrapper. 
$(".inner-carousel").css("width", slideBlockWidth); 

...为了清楚起见，将slideMargin的定义移到顶端：

var slideMargin = 30; // margin between sides. sum of both sides. 

所以代码就如下：

$(document).ready(function() { 
 
    function Carousel() { 
 
    var body_size, resizeTimer, slidesInView, 
 
     slideMargin = 30; // margin between sides. sum of both sides. 
 

 
    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; 
 
     var slideBlockWidth = ($(".carousel-list li").outerWidth() + slideMargin) * slidesInView; 
 
     // Set Width for slides direct wrapper. 
 
     $(".inner-carousel").css("width", slideBlockWidth); 
 
    } 
 
    $(window).resize(function() { 
 
     clearTimeout(resizeTimer); 
 
     resizeTimer = setTimeout(setContainerWidth, 200); 
 
    }); 
 
    setContainerWidth(); 
 

 
    //Move he last list item before the first item. 
 
    $('.carousel-list li:first').before($('.carousel-list li:last')); 
 

 
    //console.log(body_size); 
 
    //console.log(slidesInView); 
 

 
    $('.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.1/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">&#x25c4;</div> 
 
     <div class="next button">&#x25ba;</div> 
 
    </div> 
 
    </section> 
 
    <!--/carousel-wrap--> 
 
</div> 
 
<!--/container-->