Bootstrap 轮播控件不起作用

Question

I have this carousel on my site:我的网站上有这个轮播：

<div id="carousel-container" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active"><img class="d-block w-100" src="comput.jpg" alt="Slide 1"/></div>
        <div class="carousel-item"><img class="d-block w-100" src="unity.jpg" alt="Slide 2"/></div>
        <div class="carousel-item"><img class="d-block w-100" src="my.jpg" alt="Slide 3"/></div>
    </div>

    <a class="carousel-control-prev" href="#carousel-container" data-slide="prev" role="button">
        <span class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carousel-container" data-slide="next" role="button">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

The carousel controls aren't working, I click on it and nothing happens.轮播控件不起作用，我点击它，没有任何反应。 (Yes, I've already looked up to similar questions but the those solutions didn't work to me.) （是的，我已经查找过类似的问题，但这些解决方案对我不起作用。）

Answer 1

Your code will run after you use these js files.(using "bootstrap.js" or"bootstrap.min.js").您的代码将在您使用这些 js 文件后运行。（使用“bootstrap.js”或“bootstrap.min.js”）。 You can look the demo:您可以查看演示：

 <!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Ercan Er</h2> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 1" style="width:100%;"> </div> <div class="item"> <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 2" style="width:100%;"> </div> <div class="item"> <img src="https://i.ytimg.com/vi/m5d1FlSeF-M/maxresdefault.jpg" alt="Example 3" style="width:100%;"> </div> </div> <!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">Next</span> </a> </div> </div> </body> </html>

Bootstrap 轮播控件不起作用

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-12-26 14:24:43

Bootstrap 轮播控件不起作用

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-12-26 14:24:43

解决方案1
1 已采纳 2017-12-26 14:24:43