引导轮播指示器不起作用

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属性在此行中出现了两次，您只应声明一次，并将其放在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

您缺少role="listbox" 。 我认为这是问题所在。

改成：

<div class="carousel-inner" role="listbox">

引导轮播指示器不起作用

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-02-20 01:18:48

解决方案2
0 2016-02-19 23:58:20

引导轮播指示器不起作用

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-02-20 01:18:48

解决方案2 0 2016-02-19 23:58:20

解决方案1
2 已采纳 2016-02-20 01:18:48

解决方案2
0 2016-02-19 23:58:20