如何使Bootstrap轮播根据屏幕宽度显示n张图像

Question

我正在尝试制作图像轮播，以允许用户向左/向右导航。

我设法使它在我的标准分辨率下工作，并在帖子底部提供了代码（引导3.3.7）。

但是，当我在移动版本中打开它或重新缩放它时，我的图像就会重叠。

是否可以制作轮播，以根据屏幕宽度调整显示图像的数量？ 例如，如果我每行有5张图像，但是如果在移动设备上查看，则仅显示2张图像；如果导航到“右”，则显示接下来的2张图像？

<div id="suppliersCarousel" class="carousel slide text-center" data-ride="carousel" data-interval="false">   
    <div class="carousel-inner" role="listbox">
      <div class="item active">     
            <div class="text-center">
              <img src="path/path/foo.png" alt="foo">   
              <img src="path/path/foo.png" alt="foo">             
            </div>
        </div>   
      <div class="item">
        <div class="row">
            <div class="text-center">
              <img src="path/path/foo.png" alt="foo">   
              <img src="path/path/foo.png" alt="foo">   
            </div>
        </div>
      </div>
      <div class="item">
        <div class="row">
            <div class="text-center">
              <img src="path/path/foo.png" alt="foo">   
              <img src="path/path/foo.png" alt="foo">     
            </div>
        </div>
      </div>          
    </div>

    <a class="left carousel-control" href="#suppliersCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#suppliersCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>