在手机上显示一个Bootstrap旋转木马项目

Question

我有这个Bootstrap旋转木马，它在桌面视图中显示两个项目。但是，我想在移动视图中一次显示一个项目。我怎样才能做到这一点？

https://jsfiddle.net/v9t2pz9b/

HTML

<div class="container"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
     <div class="item active"> 
     <div class="col-sm-6"> 
      block1 
     </div> 
     <div class="col-sm-6"> 
      block2 
     </div> 
     </div> 
     <div class="item"> 
     <div class="col-sm-6"> 
      block3 
     </div> 
     <div class="col-sm-6"> 
      block4 
     </div> 
     </div> 

     <div class="item"> 
     <div class="col-sm-6"> 
      block5 
     </div> 
     <div class="col-sm-6"> 
      block6 
     </div> 
     </div> 

    </div> 

    <!-- Left and right controls --> 
    <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> 

JS：

$(document).ready(function(){ 
    $("#myCarousel").carousel(); 
}); 

喜欢的东西，因为这在设计中示出。我想只显示一次一个幻灯片中移动：

Answer 1

$(document).ready(function(){ 
    $("#myCarousel").carousel(); 
    if ($(window).width() < 640) { 
     $('.col-sm-6').unwrap().addClass('item'); 
     $('.col-sm-6:first').addClass('active'); 
    } 
}); 

其中640是您的移动断点。检出unwrap()，它会删除元素的父级，但不会影响其内容。

Answer 2

在自举4 U可以做到这一点

<div class="container-fluid"> 
    <div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="false"> 
     <div class="carousel-inner row w-100 mx-auto" role="listbox"> 
      <div class="carousel-item col-md-4 active"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7"> 
      </div> 
      <div class="carousel-item col-md-4"> 
       <img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7"> 
      </div> 
     </div> 
     <a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev"> 
      <i class="fa fa-chevron-left fa-lg text-muted"></i> 
      <span class="sr-only">Previous</span> 
     </a> 
     <a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next"> 
      <i class="fa fa-chevron-right fa-lg text-muted"></i> 
      <span class="sr-only">Next</span> 
     </a> 
    </div> 
</div> 

和风格

<style> 
    @media (min-width: 768px) 
{ 
    .carousel-inner .active, 
    .carousel-inner .active + .carousel-item, 
    .carousel-inner .active + .carousel-item + .carousel-item { 
     display: block; 
    } 

    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left), 
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item, 
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item { 
     transition: none; 
    } 

    .carousel-inner .carousel-item-next, 
    .carousel-inner .carousel-item-prev { 
     position: relative; 
     transform: translate3d(0, 0, 0); 
    } 

    .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item { 
     position: absolute; 
     top: 0; 
     right: -33.3333%; 
     z-index: -1; 
     display: block; 
     visibility: visible; 
    } 

    /* left or forward direction */ 
    .active.carousel-item-left + .carousel-item-next.carousel-item-left, 
    .carousel-item-next.carousel-item-left + .carousel-item, 
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item, 
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item { 
     position: relative; 
     transform: translate3d(-100%, 0, 0); 
     visibility: visible; 
    } 

    /* farthest right hidden item must be abso position for animations */ 
    .carousel-inner .carousel-item-prev.carousel-item-right { 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: -1; 
     display: block; 
     visibility: visible; 
    } 

    /* right or prev direction */ 
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right, 
    .carousel-item-prev.carousel-item-right + .carousel-item, 
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item, 
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item { 
     position: relative; 
     transform: translate3d(100%, 0, 0); 
     visibility: visible; 
     display: block; 
     visibility: visible; 
    } 
    } 
</style>