Question

我的旋转木马滑块有问题。

问题是：当我点击下一个上一个按钮时，没有任何事情发生。我在堆栈上看了一些文章，但没有人帮助过我。我尝试了其他一些旋转木马，但结果相同

谢谢

<!doctype html>
 <html>
<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <script src="bootstrap/js/bootstrap.js"></script>
</head>

  <body>
   <!--<div class="header">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container-fluid">
   <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
  <a class="navbar-brand" href="#"></a>
   </div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">


  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Úvod</a></li>
    <li><a href="#">Ubytování</a></li>
    <li><a href="#">Mapa</a></li>
    <li><a href="#">Ceník</a></li>
    <li><a href="#">Fotogalerie</a></li>
    <li><a href="#">Kontakt</a></li>     
    </li>
  </ul>
   </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
 </nav>
 </div><!-- -->

 <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 class="content">
<div class="title_content">Ubytování Macalíkovi</div>
<div class="room1"><p>Všechny pokoje mají společnou kuchyň a sociální zařízení. Kuchyň je vybavena sporákem,  troubou, varnou konvicí, mikrovlnou troubou, chladničkou a nádobím.</p></div>
<div class="room2"><p>Samozdřejmě můžete také využívat prosklennou verandu, která je přístupná z chodby pro všechny ubytované.</p></div>
<div class="room3"><p>V každém pokoji najdete televizi, která je připojenak satelitu, kde najdete velké množství kanálů, pro vaše větší pohodlí.</p></div>
 </div>
<div class="footer">
<div class="author">@ 2014 Macalíkovi, Všechna práva vyhrazena</div>
</div>

<!--<script>$("#carousel_nav").click(function(){   
var item = 4;   
$('#home_carousel').carousel(item);   
return false;   
});</script>--> <!-- -->
<script>
$(document).ready(function(){
console.log("hello world");
$('#carousel-example-generic').on('slid.bs.carousel', function () {
$holder = $( "ol li.active" );
$holder.removeClass('active');
var idx = $('div.active').index('div.item');
$('ol.carousel-indicators li[data-slide-to="'+ idx+'"]').addClass('active');
});

$('ol.carousel-indicators  li').on("click",function(){ 
$('ol.carousel-indicators li.active').removeClass("active");
$(this).addClass("active");
 });
});
 </script>

Answer 1

这可能与丢失的JQuery库有关，我添加了你的HTML + JQuery并且它有效。

<head>
    <meta charset="utf-8">
    <title>Testing</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
</head>

这是一个有效的例子：http://jsfiddle.net/choroshin/2svAm/

单击时引导轮播错误与图像

1 个答案: