Question

My Bootstrap Carousel Slide似乎无法正常工作，即使我在这里尝试了其他答案（其中一个是this。

但几乎所有这些都没有工作和过时，即使它解决了大多数其他问题（这似乎对我不起作用）

大多数代码来自Visual Studio 2017（扩展）

的Bootstrap Snippet包

    <!-- Image Slider w/ Captions -->
<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div id="#my-carousel" class="item active">
            <img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
            <div class="carousel-caption">
                <h3>Caption heading 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
            <div class="carousel-caption">
                <h3>Caption heading 2</h3>
                <p>Morbi eget libero quis metus consectetur semper.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
            <div class="carousel-caption">
                <h3>Caption heading 3</h3>
                <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
            </div>
        </div>
    </div>

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

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="js/animations.js"></script>

JS :(复制代码here）

$(document).ready(function () {
    console.log("Main Content finished loading!");
});

$("#myCarousel .slider-pager a").click(function (e) {
    var index = $(this).index();
    slider.carousel(index);
    e.preventDefault();
});

我也在一些网站上尝试过其他代码，但我似乎无法找到问题的答案或解决方案。

Answer 1

我通过摆弄引导程序依赖项来使代码正常工作。

您发布的代码没有bootstrap css。不确定你是否在自己的项目中错过了它，但我添加了一个指向CDN的链接。
引导js的链接似乎抛出错误（寻找Popper对象？）。我从测试版转换到稳定版本的bootstrap，它运行良好。
我完全忽略了你的自定义jquery：bootstrap css可以使用html标记知道下一次滑动，滑动prev等。

最后一点：我没有改变它，但为什么每个项目都有id="#my-carousel"？我认为只有外部div（类carousel）需要id="my-carousel"（没有哈希符号），其余的可以删除。

＆＃13;

<!-- Image Slider w/ Captions -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div id="my-carousel" class="carousel slide" data-ride="carousel" data-interval="false">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#my-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#my-carousel" data-slide-to="1"></li>
        <li data-target="#my-carousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">

        <div id="#my-carousel" class="item active">
            <img class="img-fluid d-block w-100" alt="First slide" src="http://placehold.it/1200x675&text=First+slide">
            <div class="carousel-caption">
                <h3>Caption heading 1</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Second slide" src="http://placehold.it/1200x675&text=Second+slide">
            <div class="carousel-caption">
                <h3>Caption heading 2</h3>
                <p>Morbi eget libero quis metus consectetur semper.</p>
            </div>
        </div>

        <div id="#my-carousel" class="item">
            <img class="img-fluid d-block w-100" alt="Third slide" src="http://placehold.it/1200x675&text=Third+slide">
            <div class="carousel-caption">
                <h3>Caption heading 3</h3>
                <p>Suspendisse ullamcorper massa eget eleifend iaculis.</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#my-carousel" 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-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 2

您的标记有多处错误。缺少Bootstrap CSS CDN链接。标记中的每张幻灯片都有一个ID id="#my-carousel"。 ID必须是唯一的。

这里有两个Bootstrap滑块的工作示例。一个使用数据属性，一个使用JavaScript init和外部控件。

var sliderTwo = $('#carouselExampleIndicators2').carousel({
  /* your options for slider #2 */
})

$(".slider-pager li").click(function (e) {
    var index = $(this).data('slide');
    sliderTwo.carousel(index);
    e.preventDefault();
});

.slider-pager {
list-style-type: none;
margin: 0;
padding: 0;
}

.slider-pager li {
background-color: #333;
color: #FFF;
padding: 1em;
margin: 0 0 1em 0;
cursor: pointer;
text-align: center;
border-radius: 4px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

<div class="container">

  <h2>Slider via data attributes</h2>

  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <!-- Your controls -->
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <!-- Your slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=First+slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Second+slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/333333/FFFFFF&text=Third+slide" alt="Third slide">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" 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="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</div>

<hr>

<div class="container">

  <h2>Slider via JavaScript,<br>external controls</h2>

  <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel">
 
  <!-- Your slides -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="http://placehold.it/1200x675/FF851B/FFFFFF&text=First+slide" alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/0074D9/FFFFFF&text=Second+slide" alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="http://placehold.it/1200x675/F012BE/FFFFFF&text=Third+slide" alt="Third slide">
    </div>
  </div>
</div>

</div>

<hr>

<div class="container">
  
  <ul class="slider-pager">
    <li data-slide="0" class="active">First slide</li>
    <li data-slide="1">Second slide</li>
    <li data-slide="2">Third slide</li>
  </ul>
</div>

Bootstrap Carousel幻灯片按钮不起作用

2 个答案: