Question

我想将旋转木马的方向从左向右改为从上到下。我找到的只是Bootstrap 3的答案而且它们没有用。我怎么能在Bootstrap 4中做到这一点？

这是轮播代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="carousel-item active">
      <img class="d-block img-fluid" src="http://via.placeholder.com/350x150" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="http://via.placeholder.com/350x150" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block img-fluid" src="http://via.placeholder.com/350x150" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

Answer 1

您需要覆盖默认路线，只需在css文件中添加以下样式，并确保在引导后加载css文件：

.carousel-item-next.carousel-item-left,
.carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
 }
 .carousel-item-next,
 .active.carousel-item-right {
   -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0);
 }
 .carousel-item-prev,
 .active.carousel-item-left {
 -webkit-transform: translate3d(0, +100%, 0);
        transform: translate3d(0, +100, 0);
 }

我为你做了一个例子：

https://jsfiddle.net/emilvr/L6cm19hL/2/

Answer 2

.carousel-item-next,
.active.carousel-item-right {
    transform: translateY(100%);
}

.carousel-item-prev,
.active.carousel-item-left {
    transform: translateY(-100%);
}

.carousel-control-prev {
    top: 0;
    bottom: unset;
}

.carousel-control-next {
    top: unset;
    bottom: 0;
}

.carousel-control-next,
.carousel-control-prev {
    left: 0;
    right: 0;
    height: 15%;
    width: 100%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    transform: rotate(90deg);
}

Answer 3

/* 改变过渡的方向。 bootstrap4 中的从左到右仅通过 css*/

只需将此代码放在 RTL.css 文件中，它就会反转方向“它将覆盖引导 css 代码”

@media all and (transform-3d), (-webkit-transform-3d) {
.active.carousel-item-left, .carousel-item-prev:not(.carousel-item-right) {
    -webkit-transform: translateX(100%);
      transform: translateX(100%);
    }
    .active.carousel-item-right, .carousel-item-next:not(.carousel-item-left) {
        -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
   }

改变Bootstrap 4轮播方向

3 个答案: