ブートストラップ複数のイメージを1つのアイテムにまとめてサイズ変更する（jqueryを使用）forループなし

Question

カルーセル内部幅に基づいてページのサイズを変更すると、ブートストラップカルーセルが作成されます）。カルーセル内部の幅は、ページのサイズを変更すると動的に生成されました。

実際のコード：

<div class="carousel-inner" role="listbox"> 


    <div class="item active"> 
     <img src="img_flower1.jpg" alt="Chania">page 1 
    </div> 

    <div class="item"> 
     <img src="img_flower2.jpg" alt="Flower">page 2 
    </div> 

    <div class="item"> 
     <img src="img_flower3.jpg" alt="Flower">page 3 
    </div> 

    <div class="item"> 
     <img src="img_flower4.jpg" alt="Flower">page 4 
    </div> 
    </div> 

期待コード：

<div class="item active"> 
     <img src="img_flower1.jpg" alt="Chania">page 1 
     <img src="img_flower2.jpg" alt="Flower">page 2 
    </div> 

    <div class="item"> 
    <img src="img_flower3.jpg" alt="Flower">page 3 
     <img src="img_flower4.jpg" alt="Flower">page 4 
    </div> 

    </div> 

Answer 1

まず、このようなカルーセルアイテムに応答性を追加する必要があります。

<div class="item"> 
    <div class="col-md-2 col-sm-6 col-xs-12"> 
    <a href="#"> 
     <img src="http://placehold.it/500/fcfcfc/333&amp;text=demo" class="img-responsive"> 
    </a> 
    </div> 
</div> 

新しいレイアウトの変更、小画面または中画面に合わせて調整されるようにします。

別のオプションは、カルーセルに別のライブラリを使用することです。私はslickを見てみることをお勧めします。それはあなたが必要とするすべてのものを持っています。

シナリオ設定では、これほど簡単です。

$('.responsive').slick({ 
    dots: true, 
    infinite: false, 
    speed: 300, 
    slidesToShow: 4, 
    slidesToScroll: 4, 
    responsive: [ 
    { 
     breakpoint: 1024, 
     settings: { 
     slidesToShow: 3, 
     slidesToScroll: 3, 
     infinite: true, 
     dots: true 
     } 
    }, 
    { 
     breakpoint: 600, 
     settings: { 
     slidesToShow: 2, 
     slidesToScroll: 2 
     } 
    }, 
    { 
     breakpoint: 480, 
     settings: { 
     slidesToShow: 1, 
     slidesToScroll: 1 
     } 
    } 
    // You can unslick at a given breakpoint now by adding: 
    // settings: "unslick" 
    // instead of a settings object 
    ] 
}); 

ブートストラップカルーセルを使用する場合は、テストするサンプルコードをいくつか示します。フルサイズのウィンドウで開き、画面サイズを変更してみてください。

$('.carousel[data-type="multi"] .item').each(function(){ 
 
    var next = $(this).next(); 
 
    if (!next.length) { 
 
    next = $(this).siblings(':first'); 
 
    } 
 
    next.children(':first-child').clone().appendTo($(this)); 
 
    
 
    for (var i=0;i<4;i++) { 
 
    next=next.next(); 
 
    if (!next.length) { 
 
    \t next = $(this).siblings(':first'); 
 
    \t } 
 
    
 
    next.children(':first-child').clone().appendTo($(this)); 
 
    } 
 
});

.carousel-control \t \t \t { width: 4%; } 
 
.carousel-control.left,.carousel-control.right {margin-left:15px;background-image:none;} 
 
@media (max-width: 767px) { 
 
\t .carousel-inner .active.left { left: -100%; } 
 
\t .carousel-inner .next  { left: 100%; } 
 
\t .carousel-inner .prev \t \t { left: -100%; } 
 
\t .active > div { display:none; } 
 
\t .active > div:first-child { display:block; } 
 

 
} 
 
@media (min-width: 767px) and (max-width: 992px) { 
 
\t .carousel-inner .active.left { left: -50%; } 
 
\t .carousel-inner .next  { left: 50%; } 
 
\t .carousel-inner .prev \t \t { left: -50%; } 
 
\t .active > div { display:none; } 
 
\t .active > div:first-child { display:block; } 
 
\t .active > div:first-child + div { display:block; } 
 
} 
 
@media (min-width: 992px) { 
 
\t .carousel-inner .active.left { left: -16.7%; } 
 
\t .carousel-inner .next  { left: 16.7%; } 
 
\t .carousel-inner .prev \t \t { left: -16.7%; } \t 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12 text-center"><h3>Testing Carousel</h3></div> 
 
<div class="col-md-10 col-md-offset-1"> 
 
<div class="carousel slide" data-ride="carousel" data-type="multi" data-interval="3000" id="myCarousel"> 
 
    <div class="carousel-inner"> 
 
    <div class="item active"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e499e4/fff&amp;text=1" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/e477e4/fff&amp;text=2" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=3" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f4f4f4&amp;text=4" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f566f5/333&amp;text=5" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/f477f4/fff&amp;text=6" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/eeeeee&amp;text=7" class="img-responsive"></a></div> 
 
    </div> 
 
    <div class="item"> 
 
     <div class="col-md-2 col-sm-6 col-xs-12"><a href="#"><img src="http://placehold.it/500/fcfcfc/333&amp;text=8" class="img-responsive"></a></div> 
 
    </div> 
 
    </div> 
 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> 
 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> 
 
</div> 
 
</div>