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

Question

我试图用引导程序 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 将其显示在小型设备上