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将其显示在小型设备上

Bootstrap轮播更改在手机上的配置

1 个答案: