Question

我是bootstrap的新手，我已经开始使用bootstrap开发网站，这里是我用于Carousel的代码，但图片没有幻灯片，任何帮助都会受到赞赏

这是我的html标记

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microvillage Communications</title>
<link rel="shortcut icon" type="image/png" href="Images/favicon.png">
<link href="Css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Css/style.css" rel="stylesheet" type="text/css">
</head>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>

</head>

<body>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-md-offset-2">
<div class="row topmargin">
<div class="col-xs-12 col-sm-6 col-md-7 col-lg-8 "><img class="img-responsive" src="Images/microvillage logo.jpg" width="360" height="60"  alt=""/></div><!-- logo_container ends here-->
<div class="col-xs-12 col-sm-6 col-md-5 col-lg-4">
<ul class="list-inline topmargin">
<li ><img class="img-rounded img-responsive" src="Images/facebookicon.png" width="30" height="30"  alt=""/></li>
<li><img class="img-rounded img-responsive" src="Images/twitter.png" width="30" height="30"  alt=""/></li>

<li><img class="img-rounded img-responsive" src="Images/linkedin.png" width="30" height="30"  alt=""/></li>

<li><img class="img-rounded img-responsive" src="Images/google+.png" width="30" height="30"  alt=""/></li>

<li><img class="img-rounded img-responsive" src="Images/youtube.png" width="30" height="30"  alt=""/></li>
</ul>
</div><!-- container for social media-->

<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-justified menu_bac">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Company</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
      Products <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      ...
    </ul>
</li>
<li><a href="#">Support</a></li>
<li><a href="#">Solution</a></li>
<li><a href="#">Services</a></li>
<li><a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Enquiry<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu"></ul>
</li>




</ul>
</div>
</div><!-- row ends here-->
</div><!-- row ends here-->

<div class="col-sm-12 col-md-12 col-lg-12">
<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Menu -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>

    <!-- Items -->
    <div class="carousel-inner">

        <div class="item active">
            <img src="http://lorempixel.com/1500/600/abstract/1" alt="Slide 1" />
        </div>
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/2" alt="Slide 2" />
        </div>
        <div class="item">
            <img src="http://lorempixel.com/1500/600/abstract/3" alt="Slide 3" />
        </div>
    </div> 
    <a href="#carousel" class="left carousel-control" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a href="#carousel" class="right carousel-control" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

</div><!-- container for image slide-->
</div>
</div><!-- row ends here-->
</div><!-- container-fluid end here-->
</body>
</html>

似乎我缺少jQuery插件，但无法找到原因

Answer 1

你的结构与bootstrap carousel完全不匹配，你不需要为carousel添加任何额外的js，只需使用bootstrap中给出的适当旋转木马结构，你的旋转木马就可以了

工作示例：http://jsfiddle.net/juddlyon/Q2TYv/10/

// invoke the carousel
$('#myCarousel').carousel({
  interval: 3000
});

/* SLIDE ON CLICK */ 

$('.carousel-linked-nav > li > a').click(function() {

    // grab href, remove pound sign, convert to number
    var item = Number($(this).attr('href').substring(1));

    // slide to number -1 (account for zero indexing)
    $('#myCarousel').carousel(item - 1);

    // remove current active class
    $('.carousel-linked-nav .active').removeClass('active');

    // add active class to just clicked on item
    $(this).parent().addClass('active');

    // don't follow the link
    return false;
});

/* AUTOPLAY NAV HIGHLIGHT */

// bind 'slid' function
$('#myCarousel').bind('slid', function() {

    // remove active class
    $('.carousel-linked-nav .active').removeClass('active');

    // get index of currently active item
    var idx = $('#myCarousel .item.active').index();

    // select currently active item and add active class
    $('.carousel-linked-nav li:eq(' + idx + ')').addClass('active');

});

@import url('//netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css');

#myCarousel {
  margin-top: 40px;
}

.carousel-linked-nav,
.item img {
  display: block; 
  margin: 0 auto;
}

.carousel-linked-nav {
  width: 120px;
  margin-bottom: 20px;   
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
  <div class="carousel-inner">
    <div class="active item">
        <img src="http://placehold.it/300x200/888&text=Item 1" />
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/aaa&text=Item 2" />
    </div>
    <div class="item">
        <img src="http://placehold.it/300x200/444&text=Item 3" />
    </div>
  </div>
  <!-- Carousel nav -->
  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

<!-- LINKED NAV -->
<ol class="carousel-linked-nav pagination">
  <li class="active"><a href="#1">1</a></li>
  <li><a href="#2">2</a></li>
  <li><a href="#3">3</a></li>
</ol>

Bootstrap v3.3.1中的轮播无法正常工作

1 个答案: