Bootstrap轮播在移动设备上更改配置

Question

我试图制作一个带有bootstrap 4但没有成功的下一个/上一张幻灯片的部分预览的旋转木马..现在版本3.3.7我得到了它。但是现在我有了新的问题，我希望幻灯片能够在移动设备上实现100％（同时33％的桌面设备）并且仍在滑动。

我跟着这个example

在桌面上（好吧！）：

在移动设备上：

我希望它能在移动设备上使用：

HTML代码：

<div id="carousel-1" data-interval="false" class="carousel slide multi-item-carousel" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-1" data-slide-to="1"></li>
    <li data-target="#carousel-1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="img-resposnive" />
      </div>
    </div>
    <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="img-resposnive" />
      </div>
    </div>
    <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="img-resposnive" />
      </div>
    </div>
        <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="" />
      </div>
    </div>
        <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="" />
      </div>
    </div>
        <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="" />
      </div>
    </div>
        <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="" />
      </div>
    </div>
        <div class="item">
      <div class="item__third">
        <img src="https://guiadacozinha.com.br/wp-content/uploads/2018/02/bolo-cenoura-festa.jpg" class="" />
      </div>
    </div>
  </div>
  <a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span></a>
  <a href="#carousel-1" class="right carousel-control" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a>
</div>

SCSS代码

    .multi-item-carousel {
  overflow: hidden;
}
.multi-item-carousel img {
  height: auto;
  width: 100%;
}
.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
    background: rgba(255, 255, 255, 0.3);
    width: 25%;
}
.multi-item-carousel .carousel-inner {
  width: 150%;
  left: -25%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
    -webkit-transform: translate3d(33%, 0, 0);
    transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
    -webkit-transform: translate3d(-33%, 0, 0);
    transform: translate3d(-33%, 0, 0);
}
.item__third {
  float: left;
  width: 33.33333333%;
}

@media screen and (max-width: 600px) {
    .item__third {
        width: 100%;
    }
    .carousel-inner > .item > img {
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        height: 500px;
            min-width: 100%;
    }
}

Javascript代码：

jQuery('.multi-item-carousel .item').each(function(){
      var next = jQuery(this).next();
      if (!next.length) next = jQuery(this).siblings(':first');
      next.children(':first-child').clone().appendTo(jQuery(this));
    });
    jQuery('.multi-item-carousel .item').each(function(){
      var prev = jQuery(this).prev();
      if (!prev.length) prev = jQuery(this).siblings(':last');
      prev.children(':nth-last-child(2)').clone().prependTo(jQuery(this));
    });

你能帮我吗？

Answer 1

图像似乎在导航栏后面。尝试为导航添加高度。这应该有所帮助。

如果你想完全改变旋转木马外观你可以添加第二个旋转木马（example）并使用@media在小型设备上显示