Question

使用bootstrap轮播，我需要强制布局居中并在移动设备上垂直滚动。不确定如何对齐列以使它们垂直堆叠，旋转木马控件（箭头）设置在顶部和底部的中心。每组4张幻灯片应该同时出现，点击向上或向下箭头时，所有4张幻灯片都应滑出视图，允许显示前一个或后一个4。

这就是它需要在移动设备上查看的方式：

当前的实现设置如下：

HTML：

<div class="col-md-12">
  <div class="contain">
  <div id="Carousel" class="carousel slide">

  <!-- Carousel items -->
  <div class="carousel-inner">

  <div class="item active">
    <div class="row">
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
    </div><!--.row-->
  </div><!--.item-->

  <div class="item">
    <div class="row">
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
    </div><!--.row-->
  </div><!--.item-->

  <div class="item">
    <div class="row">
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
      <div class="col-md-3"><a href="#"><img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;"></a><p>Title text</p></div>
    </div><!--.row-->
  </div><!--.item-->

  </div><!--.carousel-inner-->
    <a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
    <a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
  </div><!--.Carousel-->
</div>
</div>
</div><!--.container-->

CSS：

.carousel-control {
    left: 11%;
      height: 40px;
    width: 40px;
      background: none repeat scroll 0 0 #222222;
      border: 4px solid #FFFFFF;
      border-radius: 23px 23px 23px 23px;
      margin-top: 90px;
  }
  .carousel-control.right{
    left: 90%!important;
  }
  .carousel-inner{
    width: 70%;
    margin: 0 auto;
  }
  .carousel-control.right {
    left: 86%!important;
  }
  /* The indicators */
  .carousel-indicators {
    display: none;
  }

当前小提琴：https://jsfiddle.net/snytpsyr/1/

Answer 1

这允许轮播在横向上水平滚动，在移动设备上垂直滚动，如下所示：https://jsfiddle.net/joav6tee/1/

.carousel-control {
    left: 11%;
      height: 40px;
    width: 40px;
      background: none repeat scroll 0 0 #222222;
      border: 4px solid #FFFFFF;
      border-radius: 23px 23px 23px 23px;
      margin-top: 90px;
  }
  .carousel-control.right{
    left: 90%!important;
  }
  .carousel-inner{
    width: 70%;
    margin: 0 auto;
  }
  .carousel-control.right {
    left: 86%!important;
  }
  /* The indicators */
  .carousel-indicators {
    display: none;
  }
    .carousel.vertical .carousel-inner {
  height: 100%;
}
.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out top;
  -moz-transition:    0.6s ease-in-out top;
  -ms-transition:     0.6s ease-in-out top;
  -o-transition:      0.6s ease-in-out top;
  left:               0;
}
.carousel.vertical .active,
.carousel.vertical .next.left,
.carousel.vertical .prev.right    { top:     0; }
.carousel.vertical .next,
.carousel.vertical .active.right  { top:  100%; }
.carousel.vertical .prev,
.carousel.vertical .active.left   { top: -100%; }

@media screen and (min-width:993px) {

.carousel.vertical .item {
  -webkit-transition: 0.6s ease-in-out all;
  -moz-transition:    0.6s ease-in-out all;
  -ms-transition:     0.6s ease-in-out all;
  -o-transition:      0.6s ease-in-out all;
  right:               0;
}

  .carousel.vertical .active,
.carousel.vertical .next.left,
.carousel.vertical .prev.right    { top:     0; right:0;}
.carousel.vertical .next,
.carousel.vertical .active.right  { top:0;right:  -100%; }
.carousel.vertical .prev,
.carousel.vertical .active.left   { top:0;right: 100%; }
}

在移动设备上强制引导轮播垂直

1 个答案: