所有设备都能使卡鲁塞尔响应

Question

我无法修复任何设备的旋转木马图像。这是我的代码：

＆＃13;

＆＃13;

div.c-wrapper {
  height: 406px;
  width: 940px;
  /* use this, or not */
  margin: auto;
}

.img-responsive {
  max-width: 100%;
  display: block;
  height: auto;
}

＆＃13;

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="c-wrapper">
      <div id="carousel-example-generic" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <div class="item active">
            <img src="Images/carrousel11.jpg" class="img-responsive" alt="">
          </div>
          <div class="item">
            <img src="Images/carrousel5.jpg" class="img-responsive" alt="">
          </div>
          <div class="item">
            <img src="Images/carrousel6.jpg" class="img-responsive" alt="">
          </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="icon-prev"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
          <span class="icon-next"></span>
        </a>

      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢你们，如果可以帮助我的话！

Answer 1

尽管我强烈建议使用像Slick这样的库，但是从头开始创建滑块是值得考虑的，除非是为了更好地理解Web技术。

以下是需要考虑的一些事项。为了制作正确的轮播，您需要使用JavaScript来管理下一个，上一个的click个事件，然后点击关于指标。您在标记和CSS方面遇到了一些问题，我已尽力满足您的初衷，但如果有任何问题，请告知我们，我们可以从这里进行改进。

隐藏非活动图像

为了给出滑动的外观，您需要隐藏除一个活动幻灯片之外的所有内容。然后点击，您只需删除.active类隐藏活动项目，然后将该类添加到下一个元素 - 在这种情况下，请逐步执行data-slide-to属性。

定位

我找到定位上一个和下一个按钮的最佳方法是使用position: absolute。为了使其工作，您需要在其周围放置相对定位的容器。我是在.carousel上完成的。

无关标记

我没有删除所有不必要的标记，但你会发现你的例子中的几个div不是必需的，特别是在顶层。我留下了这些，以防你有其他原因。

图片

快速提示，如果您要在SO帖子中使用相对图片，请尝试将这些图片替换为Placehold.it图片，因为它们无法在SO上呈现。

.carousel-wrapper {
  width: 500px;
  margin: auto;
}


.carousel-wrapper:after {
  content: "";
  display: table;
  clear: both;
}

.carousel {
  position: relative;
}

.left, .right {
  position: absolute;
  top: 50%;
}

.left {
  left: -50px;
}

.right {
  right: -50px;
}

.img-responsive {
  max-width: 100%;
  display: block;
}

.carousel-indicators {
  display: block;
  height: auto;
  padding: 0;
  margin: 0;
  text-align: center;
}
.carousel-indicators li {
  width: 15px;
  height: 15px;
  background: #ccc;
  margin: 0 5px;
  display: inline-block;
  list-style: none;
  border-radius: 50%;
}

.item {
  display: none;
}

.active {
  display: block;
}

<div class="container">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-wrapper">
      <div id="carousel-example-generic" class="carousel slide">
        <!-- Indicators -->
        <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
          <img src="https://placehold.it/500x250" class="item active img-responsive" alt="">
          <img src="https://placehold.it/500x250" class="item img-responsive" alt="">
          <img src="https://placehold.it/500x250" class="item img-responsive" alt="">
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
          <span class="icon-prev">Prev</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
          <span class="icon-next">Next</span>
        </a>

      </div>
    </div>
  </div>
</div>