如何修复轮播滑块控件？答案

【问题标题】：How Do I Fix the Carousel Slider Controls?如何修复轮播滑块控件？
【发布时间】：2019-07-23 22:24:50
【问题描述】：

我正在尝试设置一个 CSS 轮播，当我编写代码时，自动滑动似乎可以正常工作，尽管它看起来有点小错误。然而，主要问题是 prev 和 next 控件无法正常工作。每次单击其中一个时，它们总是从活动项目图像开始，因此您永远无法完全单击图像。

<body>
  <div class="container">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12">
          <div id="my-slider" class="carousel slide" data-ride="carousel">

            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="images/parvazlogo.jpg" alt="program" />
                <div class="carousel-caption">

                  <h1></h1>
                </div>
              </div>
              <div class="item">
                <img src="images/program1.jpg" alt="programming image" />
                <div class="carousel-caption">

                  <h1>ParwazTech Will Bring your Ideas To Life!</h1>
                </div>

              </div>
              <div class="item">
                <img src="images/innovation.jpg" alt="innovation" />
                <div class="carousel-caption">

                  <h1>Learn More about Us</h1>
                </div>

              </div>
              <div class="item">
                <img src="images/office.jpg" alt="deal struck" />
                <div class="carousel-caption">

                  <h1>Start looking at deals now!</h1>
                </div>

              </div>
              <a class="left carousel-control" href="#my-slider" 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="#my-slider" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">next</span>
              </a>
            </div>

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

【问题讨论】：

当我看到你的代码时，你正在使用 Bootstrap。那你为什么不使用 Bootstrap 轮播本身呢？
@SaiManoj 我以为我在使用 Bootstrap Carousel？
您提到您使用的是有问题的css carousel。哪个版本的 Bootstrap ？
@SaiManj Bootstrap v3.4.1
w3schools.com/bootstrap/…请通过这个

标签： css angularjs twitter-bootstrap-3 carousel

【解决方案1】：

@MatiasFernandezMartinez

https://youtu.be/7Hr-EBEpVJ0 这是一个问题视频，只是为了证明它正在发生。正如您所看到的，底部的三个按钮工作正常，但左右两个按钮却带来了我描述的问题

我假设问题出在我的引导程序或 jquery 上，因为代码不会给您带来所有问题

【讨论】：

应该是，尝试在plunker或codepen上重现它，向后工作应该有助于找到问题，html模板是正确的