항목 당 3 열의 모바일 버전의 Boostrap 회전식 메뉴

Question

나는 link에있는 것을 삼중으로하고 있습니다. 하지만 항목 당 3 개의 div 또는 요소가 있어야합니다. 내 문제는 모바일 모드에있을 때 각 항목의 mi 요소 중 마지막 2 개가 제거된다는 것입니다. 나는 이미이 post을 읽었지만, 항목 당 3 개의 열을 가진 모바일 모드에서는 나에게 도움이되지 못했다.

HTML : 이것은 내 코드입니다

<div class="col-md-12 text-center"><h3>Product Carousel</h3></div> 
    <div class="col-md-12 "> 
    <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-4 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 class="col-md-4 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 class="col-md-4 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-4 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-4 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-4 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-4 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-4 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-4 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-4 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> 

내 CSS는 :

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

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

JS : 미리

$('.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<2;i++) { 
    next=next.next(); 
    if (!next.length) { 
     next = $(this).siblings(':first'); 
    } 

    next.children(':first-child').clone().appendTo($(this)); 
    } 
}); 

감사합니다.

Answer 1

대신 slick.js가 사용되었습니다. 부트 스트랩보다 응답 성있게 사용자 정의하는 것이 더 유연합니다.