Question

点击此轮播中的指示符圈，而不是加载适当的图像时，没有任何反应。旋转木马会循环显示每个图像;没有办法用指标控制它。我已经阅读了之前发布的有关此问题的帖子，并且那里提出的解决方案对我没用。有人会介意我快速查看我的HTML，看看我是否遗漏了一些非常明显的东西？提前感谢您抽出宝贵时间！

<head>
    <title>Freshwater Ranch</title>
    <link rel="shortcut icon" href="logo.jpg" type="image/ico">
    <meta charset = "UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Homemade+Apple' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="freshwater_styles.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌
    <script src="jquery-1.12.0.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>



<div class="photo_body" class="carousel slide" data-ride="carousel" id="rotating_photos">
    	<ol class="carousel-indicators">
    		<li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
    		<li data-target="#rotating_photos" data-slide-to="1"></li>
    		<li data-target="#rotating_photos" data-slide-to="2"></li>
    		<li data-target="#rotating_photos" data-slide-to="3"></li>
    	</ol>
    	<div class="carousel-inner">
    		<div class="item active">
    			<img src="ranchhouseview1.jpg" alt="View of Ranch">
    		</div>
    		<div class="item">
    			<img src="view4.jpg" alt="View of Ranch">
    		</div>
    		<div class="item">
    			<img src="horse.jpg" alt="Horse Photo">
    		</div>
    		<div class="item">
    			<img src="view5.jpg" alt="View of Ranch">
    		</div>
    	</div><!--carousel inner-->

    </div><!--carousel outer-->

Answer 1

它没有用，因为你在轮播的第一行说了两次class属性：

<div class="photo_body" class="carousel slide" data-ride="carousel" id="rotating_photos">

正如你所看到的那样，class属性在这一行中两次，你应该只说出一次，然后把它放在carousel和slide之后的photo_body类。这是它的外观。

<div class="carousel slide photo_body" data-ride="carousel" id="rotating_photos">
    <ol class="carousel-indicators">
        <li data-target="#rotating_photos" data-slide-to="0" class="active"></li>
        <li data-target="#rotating_photos" data-slide-to="1"></li>
        <li data-target="#rotating_photos" data-slide-to="2"></li>
        <li data-target="#rotating_photos" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="item active">
            <img src="ranchhouseview1.jpg" alt="View of Ranch">
        </div>
        <div class="item">
            <img src="view4.jpg" alt="View of Ranch">
        </div>
        <div class="item">
            <img src="horse.jpg" alt="Horse Photo">
        </div>
        <div class="item">
            <img src="view5.jpg" alt="View of Ranch">
        </div>
    </div><!--carousel inner-->
</div><!--carousel outer-->

此外，我不确定这是否与您的旋转木马无关，但您有3种不同版本的jquery加载。我很确定这不是必要的。我只是加载你在那里的最新版本

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌

并删除以下标签：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">  </script>
<script src="jquery-1.12.0.min.js"></script>

除非你有一些需要早期版本的jquery的插件，否则你可以加载早期版本但是如果你加载了多个版本的jquery，你可能会遇到一些冲突。

Answer 2

您缺少<div class="carousel-inner" role="listbox">。我认为这是个问题。

更改为：

Accept

Bootstrap Carousel指示灯不工作

2 个答案: