css - 使轮播在所有设备中响应

Question

我无法为任何设备修复轮播图片。这是我的代码:

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

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

<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>

如果能帮帮我，谢谢大家!

Answer 1

尽管我强烈建议使用像 Slick 这样的库，但从头开始创建 slider 的练习值得考虑，如果没有其他原因，只是为了更好地理解网络技术。

以下是一些需要考虑的事项。为了制作合适的旋转木马，您需要使用 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>