Bootstrap轮播无法正常运行

时间：2017-08-01 07:16:20

标签： jquery html css twitter-bootstrap carousel

尝试在容器流体div中创建一个bootstrap轮播。但是，当页面加载时，幻灯片堆叠在一起，并且轮播上的所有按钮都没有响应，并且下一个和上一个箭头不可见。

用于轮播的代码来自bootstrap网站： https://v4-alpha.getbootstrap.com/components/carousel/

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Wall</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles/build/css/styles.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <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>
      <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
          <img class="d-block img-fluid" src="https://preview.ibb.co/d7Aezk/slider1.jpg" alt="First slide">
        </div>
        <div class="carousel-item">
          <img class="d-block img-fluid" src="https://preview.ibb.co/iPHRek/slider2.jpg" alt="Second slide">
        </div>
        <div class="carousel-item">
          <img class="d-block img-fluid" src="https://preview.ibb.co/kTW8s5/slider3.jpg" 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>
  <div class="buttonGroup">
    <div class="btn-group btn-group-justified">
      <div class="btn-group" role="group">
        <button id="manualBtn" type="button" class="btn btn-default">Manual</button>
      </div>
      <div class="btn-group" role="group">
        <button id="twitterBtn" type="button" class="btn btn-default">Twitter</button>
      </div>
      <div class="btn-group" role="group">
        <button id="instagramBtn" type="button" class="btn btn-default">Instagram</button>
      </div>
    </div>
  </div>
  <div class="wrapper">
    <div id="main">
    </div>
  </div>
  <div class="buttonWrapper">
    <button id="loadMore" type="button" class="btn btn-primary btn-lg">Load More</button>
  </div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

你忘了包含bootstrap js文件..

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

答案 1 :(得分：0)

您可以使用此代码：

注意：您缺少bootstrap.min.js库。

以下是演示链接：https://output.jsbin.com/huhedecuyo

https://jsbin.com/huhedecuyo/edit?html,output 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Wall</title>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="styles/build/css/styles.css">
     <script type="text/javascript">
      $(document).ready(function(){
         $('#carouselExampleIndicators').carousel({
            interval: 2000,
            pause: "false"
        });
      });
    </script>
</head>

<body>
    <div class="container-fluid">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <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>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img class="d-block img-fluid" src="https://preview.ibb.co/d7Aezk/slider1.jpg" alt="First slide">
                </div>
               <div class="item">
                    <img class="d-block img-fluid" src="https://preview.ibb.co/iPHRek/slider2.jpg" alt="Second slide">
                </div>
                <div class="item">
                    <img class="d-block img-fluid" src="https://preview.ibb.co/kTW8s5/slider3.jpg" 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>
    <div class="buttonGroup">
        <div class="btn-group btn-group-justified">
            <div class="btn-group" role="group">
                <button id="manualBtn" type="button" class="btn btn-default">Manual</button>
            </div>
            <div class="btn-group" role="group">
                <button id="twitterBtn" type="button" class="btn btn-default">Twitter</button>
            </div>
            <div class="btn-group" role="group">
                <button id="instagramBtn" type="button" class="btn btn-default">Instagram</button>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <div id="main">
        </div>
    </div>
    <div class="buttonWrapper">
        <button id="loadMore" type="button" class="btn btn-primary btn-lg">Load More</button>
    </div>
</body>

</html>
相关问题
最新问题