ブートストラップカルーセルと応答性

Question

私はいくつかのユーザーの写真を表示するウェブサイトを持っています。画像は、四角い形状と固定サイズ（100×100ピクセル）を持ちます。すべてのユーザーの画像を1行に表示するのに十分なスペースがない場合は、カルーセルを作成したいと考えています。ブラウザのウィンドウのサイズを変更すると、このカルーセルを有効/無効にしたいと思います。

簡単に可能かどうか、ブートストラップのカルーセルが最善の選択肢かどうかわかりません。

アドバイスをお寄せいただきありがとうございます。

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>