我的Bootstrap Carousel不起作用，按钮不显示

时间：2018-02-09 19:31:15

标签： javascript jquery html css twitter-bootstrap

我已经尝试过在这些论坛中找到的所有解决方案，而我在YouTube上找到的一些解决方案，没有任何效果。请记住，我是一个新手，这是我的第一个Bootstrap项目，我第一次在这里发帖。我基本上复制了示例项目中的所有代码，所以我不知道我做错了什么。我在我的计算机上安装了Bootstrap，下载并安装了字体，我能想到的一切。我在这里失去了理智。基本上我有三个问题：我的旋转木马根本不工作，箭头没有显示，页面需要永远加载。这是我的代码。在此先感谢您的帮助。

/* NAVBAR
-------------------------------------------------- */

.navbar {
  margin-bottom: 0;
}

/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
  height: 240px;
  margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 240px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 240px;
}

@media (min-width: 768px) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

}

/* MARKETING
-------------------------------------------------- */

.marketing {
  margin: 60px auto;
}

.marketing .col-md-4 {
  text-align: center;
  font-size: 16px;
}

.marketing .col-md-4 .glyphicon {
  font-size: 60px;
  background-color: #EAEAEA;
  border-radius: 50%;
  padding: 40px;
  color: #444;
}


/* STICKY FOOTER
-------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 160px;
}

.footer,
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 160px;
  background: #444;
  color: white;
  text-shadow: 1px 1px 1px black;
  padding: 40px 0;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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 href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
</head>
<body>
<title>HTML Portfolio</title>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">My name</a>
    </div>
    <div class="collapse navbar-collapse" id="portfolio-collapse-menu">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#portfolio-carousel" data-slide-to="1"></li>
    <li data-target="#portfolio-carousel" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <div class="container">
      <div class="carousel-caption">
        <h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
      </div>
    </div>
  </div>
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
          </div>
      </div>
    </div>
    <div class="carousel-inner" role="listbox">
      <div class="item">
        <div class="container">
          <div class="carousel-caption">
            <h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
        </div>
      </div>
      <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Left</span>
      </a>
      <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
        <span class="glyphicon right" aria-hidden="true"></span>
        <span class="sr-only">Right</span>
      </a>
    </div>
 
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

3 个答案:

答案 0 :(得分：0)

第8行是不必要的，你已经有了bootstrap 3.3.7

你应该只有一个旋转木马 - 内部类

＆＃13;
＆＃13; 
<div class="carousel-inner" role="listbox">
<div class="item active">
    <div class="container">
      <div class="carousel-caption">
        <h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
      </div>
    </div>
  </div>
  
<div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>What I do</h1>
<p>I am a front-end developer who loves writing code that works well in different environments.</p>
          </div>
      </div>
</div>

<div class="item">
        <div class="container">
          <div class="carousel-caption">
            <h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
        </div>
      </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

你非常接近。 ;）你定义了许多不必要的div，比如两个body div和许多div与class carousel-inner。您的版本中还有两个封闭的头部标签。您的控件不需要在您的旋转木马内部。右箭头的CSS类也是错误的。只需将它们与左箭头中的那些进行比较即可。

/* NAVBAR
-------------------------------------------------- */

.navbar {
  margin-bottom: 0;
}

/* CUSTOMIZED CAROUSEL
-------------------------------------------------- */
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
/* Carousel base class */
.carousel {
  height: 240px;
  margin-bottom: 30px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel .item {
  height: 240px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 240px;
}

@media (min-width: 768px) {

  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

}

/* MARKETING
-------------------------------------------------- */

.marketing {
  margin: 60px auto;
}

.marketing .col-md-4 {
  text-align: center;
  font-size: 16px;
}

.marketing .col-md-4 .glyphicon {
  font-size: 60px;
  background-color: #EAEAEA;
  border-radius: 50%;
  padding: 40px;
  color: #444;
}


/* STICKY FOOTER
-------------------------------------------------- */

html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 160px;
}

.footer,
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 160px;
  background: #444;
  color: white;
  text-shadow: 1px 1px 1px black;
  padding: 40px 0;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <!-- Latest compiled and minified Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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 href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
</head>
<body>

<div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#portfolio-carousel" data-slide-to="1"></li>
    <li data-target="#portfolio-carousel" data-slide-to="2"></li>
  </ol>
<div class="carousel-inner" role="listbox">
  <div class="item active">
    <div class="container">
      <div class="carousel-caption">
        <h1>Who I am</h1>
<p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
      </div>
    </div>
  </div>
    <div class="item">
      <div class="container">
        <div class="carousel-caption">
          <h1>What I do</h1>
I am a front-end developer who loves writing code that works well in different environments.</p>
          </div>
      </div>
    </div>
      <div class="item">
        <div class="container">
          <div class="carousel-caption">
            <h1>What I've done</h1>
<p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
        </div>
      </div>
      </div>
      <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Left</span>
      </a>
      <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Right</span>
      </a>
 
</body>
<!--latest jQuery 3-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<!--Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

答案 2 :(得分：0)

这是更正的文件

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0">
  <!-- Latest compiled and minified Bootstrap CSS-->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 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" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
  </head>

  <body>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapsed" data-target="#portfolio-collapse-menu">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
      </button>
          <a class="navbar-brand" href="#">My name</a>
        </div>
        <div class="collapse navbar-collapse" id="portfolio-collapse-menu">
          <ul class="nav navbar-nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div id="portfolio-carousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#portfolio-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#portfolio-carousel" data-slide-to="1"></li>
        <li data-target="#portfolio-carousel" data-slide-to="2"></li>
      </ol>

      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <div class="container">
            <div class="carousel-caption">
              <h1>Who I am</h1>
              <p>Hi, my name is Virginia Balseiro and I love to write code that is efficient. I love innovating without reinventing the wheel!</p>
            </div>
          </div>
        </div>

        <div class="item">
          <div class="container">
            <div class="carousel-caption">
              <h1>What I do</h1>
              <p>I am a front-end developer who loves writing code that works well in different environments.</p>
            </div>
          </div>
        </div>


        <div class="item">
          <div class="container">
            <div class="carousel-caption">
              <h1>What I've done</h1>
              <p>I am just starting out as a developer, but I already have a few works that I'd be happy to share. Personal projects are what have kept me busy.</p>
            </div>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#portfolio-carousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Left</span>
      </a>
      <a class="right carousel-control" href="#portfolio-carousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Right</span>
      </a>
    </div>

  <!--latest jQuery 3-->
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <!--Bootstrap JS-->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

相关问题
最新问题