引导轮播和响应能力

Question

我有一个显示一些用户图片的网站。图片具有正方形和固定尺寸（100x100 像素）。如果没有足够的空间在一行中显示所有用户的图片，我想创建一个轮播。如果我调整浏览器窗口的大小，我希望激活/停用此轮播。

不知道是不是很容易，bootstrap的carousel是不是最好的选择！

提前感谢您的任何建议！

Answer 1

这是你想要达到的目标吗？

https://codepen.io/glebkema/pen/QvvowE

var isCarouselPaused = false;

$( window ).on( 'load resize', function() {
  if ( document.documentElement.clientWidth >= 768 ) {
    if ( !isCarouselPaused ) {
      $( '#myCarousel' ).carousel('pause');
      isCarouselPaused = true;
    }
  } else {
    if ( isCarouselPaused ) {
      $( '#myCarousel' ).carousel('cycle');
      isCarouselPaused = false;
    }
  };
});

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

@media (min-width: 768px) {
  .carousel .item {
    display: block;
    float: left;
    margin: 12px;
  }
  .carousel-control, 
  .carousel-indicators {
    display: none;
  }
}

/* Make the images wide and responsive. */
.carousel-inner img {
  height: auto;
  width: 100%;
}

/* Decorations */  
.carousel {
  margin-bottom: 20px;
  margin-top: 20px;
}

<div class="container">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active"><img src="https://placehold.it/100x100/fc3/fff/?text=1" alt=""></div>
      <div class="item"><img src="https://placehold.it/100x100/693/fff/?text=2" alt=""></div>
      <div class="item"><img src="https://placehold.it/100x100/369/fff/?text=3" alt=""></div>
      <div class="item"><img src="https://placehold.it/100x100/f63/fff/?text=4" alt=""></div>
      <div class="item"><img src="https://placehold.it/100x100/936/fff/?text=5" alt=""></div>
    </div>
    <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a>
  </div>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>