0

I can't get my Carousel Buttons to link to the next items, have been using various resources to try and fix but have been unsuccesfull, anybody able to tell me what I'm doing wrong?

<div id="myCarousel1" class="carousel slide">
                <!-- Carousel items -->
                <div class="carousel-inner">
                  <div class="active item">
                    <blockquote><p>"It includes building databases, credibility and marketing on Facebook using ad campaigns - Making money while you sleep lol!"</p></blockquote>
                    <div class="carousel-info">
                      <img class="pull-left" src="http://order-summaries.s3.amazonaws.com/SMD/faisal.png" alt="">
                      <div class="pull-left">
                        <span class="testimonials-name">Faisal Shafiq</span>
                        <span class="testimonials-post">Entrepreneur</span>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <blockquote><p>"I'm so excited by it and have submersed myself in the material. I have no doubts about my iminent success."<em class="em em-smiley"></em></p></blockquote>
                    <div class="carousel-info">
                      <img class="pull-left" src="http://order-summaries.s3.amazonaws.com/SMD/tom.png" alt="">
                      <div class="pull-left">
                        <span class="testimonials-name">Tom Brailsford</span>
                        <span class="testimonials-post">Commercial Director</span>
                      </div>
                    </div>
                  </div>
                  <div class="item">
                    <blockquote><p>"Lots of homework, learning about motivating factors, goal setting and targets."</p></blockquote>
                    <div class="carousel-info">
                      <img class="pull-left" src="http://order-summaries.s3.amazonaws.com/SMD/barbara.png" alt="">
                      <div class="pull-left">
                        <span class="testimonials-name">Barbara Hunte</span>
                        <span class="testimonials-post">NHS Co-ordinator</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Carousel nav -->
                <a class="left-btn" href="#myCarousel1"  data-slide="prev"></a>
                <a class="right-btn" href="#myCarousel1" data-slide="next"></a>
              </div>

The Compenents. CSS file is:

COMPONENTS.CSS

  /***
    Image Carousel
    ***/
    .carousel.image-carousel .carousel-inner {
  padding-top: 0;
  padding-bottom: 0;
    }
    .carousel.image-carousel .carousel-control i {
  position: absolute;
  top: 40%;
    }
    .carousel.image-carousel.image-carousel-hoverable .carousel-control i 
    {
  display: none;
    }
    .carousel.image-carousel.image-carousel-hoverable:hover .carousel-control i {
  display: inline-block;
    }
    .carousel.image-carousel .carousel-control.left i {
  left: 10px;
    }
    .carousel.image-carousel .carousel-control.right i {
  right: 10px;
    }
    .carousel.image-carousel .carousel-indicators {
  margin-top: 10px;
  bottom: -7px;
    }
    .carousel.image-carousel .carousel-indicators li {
  background-color: #666;
    }
    .carousel.image-carousel .carousel-indicators li.active {
  background-color: #666;
    }
    .carousel.image-carousel .carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 15px 15px 25px 15px;
  background: #333333;
  background: rgba(0, 0, 0, 0.75);
    }
    .carousel.image-carousel .carousel-caption h4,
    .carousel.image-carousel .carousel-caption h3,
    .carousel.image-carousel .carousel-caption h2,
    .carousel.image-carousel .carousel-caption p {
  text-align: left;
  line-height: 20px;
  color: #ffffff;
    }
    .carousel.image-carousel .carousel-caption h4,
    .carousel.image-carousel .carousel-caption h3,
    .carousel.image-carousel .carousel-caption h2 {
  margin: 0 0 5px;
    }
    .carousel.image-carousel .carousel-caption h4 a,
    .carousel.image-carousel .carousel-caption h3 a,
    .carousel.image-carousel .carousel-caption h2 a {
  color: #aaa;
    }
    .carousel.image-carousel .carousel-caption p {
  margin-bottom: 0;
    }
    .carousel.image-carousel .carousel-caption .item {
  margin: 0;
    }
4

1 回答 1

0

确保正确链接引导 css、js 和 jquery

你可以参考下面的代码，它应该适合你，

.carousel-inner>.item>img{
  max-width: 100%;
  width: 100%;
}
<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>
  


<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="http://placehold.it/450x350" alt="Slide 1">
      <div class="carousel-caption">
        Caption Slide 1
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 2">
      <div class="carousel-caption">
        Caption Slide 2
      </div>
    </div>
    <div class="item">
      <img src="http://placehold.it/450x350" alt="Slide 3">
      <div class="carousel-caption">
        Caption Slide 3
      </div>
    </div>        
  </div>

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

于 2017-05-15T11:08:34.020 回答