如何修复旋转木马，每次转换后图像似乎都会跳跃.整个框架先小后大

How to fix carousel, after each transition the image seems to jump. ie the whole frame gets smaller then bigger

本文关键字：跳跃 框架 旋转木马 何修复 图像 转换      更新时间：2023-09-26

我对代码、引导程序和dreamweave真的很陌生。我在我正在建设的网站上添加了一个旋转木马，运行得非常好，但我必须做点什么，现在当自动滚动时，当我点击向右滚动时，图像会失去图像的下半部分，但当我向左滚动时不会。

<div id="carousel1" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel1" data-slide-to="0" class="active"></li>
    <li data-target="#carousel1" data-slide-to="1"></li>
    <li data-target="#carousel1" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner" role="listbox">
    <div class="item active"><img src="images/Slider and gallery/img_1_blank.jpg" alt="image of neat 3.0KW (12 panel) solar system, on sandstone house with black tin roof and blue skys" width="992" height="282" class="center-block">
      <div class="carousel-caption">
        <h3>First slide Heading</h3>
        <p>First slide Caption</p>
      </div>
    </div>
    <div class="item"><img src="images/Slider and gallery/img_2_blank.jpg" width="992" height="282" alt="" class="center-block">
      <div class="carousel-caption">
        <h3>Second slide Heading</h3>
        <p>Second slide Caption</p>
      </div>
    </div>
    <div class="item"><img src="images/Slider and gallery/img_3_blank.jpg" width="992" height="282" alt="" class="center-block">
      <div class="carousel-caption">
        <h3>Third slide Heading</h3>
        <p>Third slide Caption</p>
      </div>
    </div>
  </div>
<a class="left carousel-control" href="#carousel1" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="right carousel-control" href="#carousel1" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span><span class="sr-only">Next</span></a></div>

如果你需要任何进一步的信息，请告诉我。提前感谢

  • 首先删除DIV元素上的内联宽度和高度。

    在您的main.css文件中创建一个css类，该类将具有css属性，然后在html元素中调用该类，但如果您想让网站响应，我建议您不要使用固定宽度，除非您要实现媒体查询。在我的例子中，我创建了一个自定义css类，看起来像这样。

    .carousel-img-item { width: 100%; height: 500px}

  • 第二步，拆除班级中心块。

    • css类.center-block添加了一个css属性min-height，这在一定程度上导致图像失去下半部分

您的html代码现在应该是这样的。

<img src="images/Slider and gallery/img" class="carousel-img-item">

相关文章：