Bootstrap-4.3 中的多图像滑动轮播问题

Question

我试图制作一个 Carousel 包含一行中的多个图像，并且一次仅使用 bootstrap 滑动一个图像。像这样：

我尝试遵循此。我使用 bootstrap-3.3.6 和 jquery-2.2.2 而不是 bootstrap-4.3.1 和 jquery-3.3.1 但在我的例子中图像按垂直顺序而不是水平顺序。我究竟做错了什么？如何水平排列图片？

$(document).ready(function () {
  $('.fdi-Carousel .carousel-item').each(function () {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});

#outerCarousel {
  width: 100%;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}
.carousel-inner.onebyone-carousel {
  margin: auto;
  width: 90%;
}
.onebyone-carousel .active.carousel-item-left {
  left: -33.33%;
}
.onebyone-carousel .active.carousel-item-right {
  left: 33.33%;
}
.onebyone-carousel .carousel-item-next {
  left: 33.33%;
}
.onebyone-carousel .carousel-item-prev {
  left: -33.33%;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <main role="main">
      <div class="container">
        <div class="row">
          <div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000"
               data-pause="false">
            <div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="0"
                 data-pause="false">
              <div class="carousel-inner onebyone-carousel">
                <div class="carousel-item active">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/4287f5/000&amp;text=1">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/f57b42/000&amp;text=2">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/42f58a/000&amp;text=3">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/a442f5/000&amp;text=4">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/d1f542/000&amp;text=5">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/f5429e/000&amp;text=6">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-md-4">
                    <img src="http://placehold.it/100/42cef5/000&amp;text=7">
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#innerCarousel" 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="#innerCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </main>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
  </body>
</html>

谢谢。

Answer 1

$(document).ready(function() {
  $('.fdi-Carousel .carousel-item').each(function() {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    } else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});

#innerCarousel {
  width: 100%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}

.carousel-inner.onebyone-carousel {
  margin: auto;
  width: 90%;
}

.onebyone-carousel .active.carousel-item-left {
  left: -33.33%;
}

.onebyone-carousel .active.carousel-item-right {
  left: 33.33%;
}

.onebyone-carousel .carousel-item-next {
  left: 33.33%;
}

.onebyone-carousel .carousel-item-prev {
  left: -33.33%;
}

.carousel-item img {
  width: 33%;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <main role="main">
    <div class="container">
      <div class="row">
        <div id="innerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000" data-pause="false">
          <div class="carousel-inner onebyone-carousel">
            <div class="carousel-item active">
              <img src="http://placehold.it/100/4287f5/000&amp;text=1">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/f57b42/000&amp;text=2">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/42f58a/000&amp;text=3">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/a442f5/000&amp;text=4">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/d1f542/000&amp;text=5">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/f5429e/000&amp;text=6">
            </div>
            <div class="carousel-item">
              <img src="http://placehold.it/100/42cef5/000&amp;text=7">
            </div>
          </div>
          <!-- .carousal-inner -->

          <a class="carousel-control-prev" href="#innerCarousel" 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="#innerCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        <!-- .carousel -->
      </div>
      <!-- .row -->
    </div>
    <!-- .container -->
  </main>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

使用一些 HTML 和 CSS 修改来修复代码。该修复将使轮播图像以水平布局显示。这是我更改的内容列表

在轮播中 img 添加了宽度
删除了 div.col-md-4
已删除#outerCarousel

Answer 2

首先，您提供的代码有很多错误。我相信有很多在线轮播示例只是从其他人那里复制和粘贴，但从不尝试理解代码，相反，他们不断添加更多错误代码来解决他们可以解决的问题 "see"，请小心。

有许多无用的 <div> 包装器和 CSS 旨在修复错误行为的样式，这显然会使调试过程变得更糟。

建议大家先看看官方文档，看看那些组件的结构，然后根据SO答案慢慢实现思路。

出于演示目的，我只是从您的代码中删除了其中的大部分内容。

为了使其响应，我相信您必须修改 js 代码，以便它可以填充不同 col-size 的轮播以及 CSS。但似乎没有一种简单的方法可以解决 CSS 部分。

$(document).ready(function () {
  $('.fdi-Carousel .carousel-item').each(function () {
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));
    
    //this will only work for carousel with 3 items since it only adds next() and  next.next();

    if (next.next().length > 0) {
      next.next().children(':first-child').clone().appendTo($(this));
    }
    else {
      $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
  });
});

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: tomato !important;
}

.fdi-Carousel .carousel-inner .active.carousel-item,
.fdi-Carousel .carousel-inner .carousel-item-next,
.fdi-Carousel .carousel-inner .carousel-item-prev {
  display: flex;
} 

/* 'Again 33% means col-4, in order to make it responsive or whatever you want, you have to create different translateX()  for differernt col' */
.fdi-Carousel .carousel-inner .active.carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-prev {
  transform: translateX(-33.33%);
}
.fdi-Carousel .carousel-inner .active.carousel-item-right, .fdi-Carousel .carousel-inner .carousel-item-next {
  transform: translateX(33.33%);
}

.fdi-Carousel .carousel-inner .carousel-item-left, .fdi-Carousel .carousel-inner .carousel-item-right {
  transform: translateX(0);
  }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"  crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
      <div class="container-fluid">
        <div class="row w-100">
          <div class="col">
          <div id="outerCarousel" class="carousel fdi-Carousel slide" data-ride="carousel" data-interval="5000">
              <div class="carousel-inner row no-gutters">
                <div class="carousel-item active">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/4287f5/000&amp;text=1">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/f57b42/000&amp;text=2">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/42f58a/000&amp;text=3">
                  </div>
                </div>
                <div class="carousel-item">
                  <div class="col-4 text-center">
                    <img src="http://placehold.it/100/a442f5/000&amp;text=4">
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#outerCarousel" 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="#outerCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
              </a>
          </div>
        </div>
      </div>
      </div>
  </body>
</html>

Bootstrap-4.3 中的多图像滑动轮播问题

Multiple Image Sliding Carousel problem in Bootstrap-4.3

css

carousel

twitter-bootstrap

bootstrap-4