Question

我正在尝试使用Bootstrap 4构建图像轮播。但是，图像并没有按照应有的方式滑动。用于更改幻灯片的光标不起作用。当您尝试下一张幻灯片时，这些幻灯片会重复图像。

这是项目alabamarket.com的链接看到奇怪的行为

这是我编写的代码

 <div class="col-md-8 hide">
    <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img class="d-block w-100" src="assets/sliders/award-alaba.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/sliders/5.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block w-100" src="assets/sliders/1.jpg" alt="Third slide">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

Answer 1

我发现测试您的网站的行为异常

打开Chrome中的开发工具（Ctrl + Shift + I），然后在源面板中搜索div <div _ngcontent-wfo-c3="" class="carousel-inner"> 在其上按鼠标右键，然后选择“编辑html”，然后复制所有内容（ctrl-A，ctrl-C）。

好..现在清除内容（ctrl-A + suppr）并粘贴您的内容。（我知道“您粘贴了复制的内容”）仍然无效

...现在再次对该html进行html编辑，清除内容（ctrl-A + suppr），但这一次粘贴下面的内容（工作代码）...可以按预期工作，

但是它是相同的代码，只是它已复制到记事本中。

在复制/粘贴之后，您的源代码中是否可能存在特殊字符？

工作代码

<div _ngcontent-wfo-c3="" class="carousel-inner">

    <div _ngcontent-wfo-c3="" class="carousel-item active">
       <img _ngcontent-wfo-c3="" alt="First slide" class="d-block w-100" src="assets/sliders/1.jpg">
    </div>

    <div _ngcontent-wfo-c3="" class="carousel-item">
       <img _ngcontent-wfo-c3="" alt="Second slide" class="d-block w-100" src="assets/sliders/2.jpg">
    </div>

    <div _ngcontent-wfo-c3="" class="carousel-item">
       <img _ngcontent-wfo-c3="" alt="Third slide" class="d-block w-100" src="assets/sliders/award-alaba.jpg">
    </div>

    <div _ngcontent-wfo-c3="" class="carousel-item">
       <img _ngcontent-wfo-c3="" alt="Third slide" class="d-block w-100" src="assets/sliders/5.jpg">
    </div>

</div>

我主页上的Bootstrap轮播无法正常工作

1 个答案: