Question

我有以下代码，

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<input type="button" id="myButton" value="click"/>



<div class="container"> <!--for carousel -->
<div class="well">

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">

  <div class="carousel-inner">
    <div class="item active" id="first_carousel">                       

              <a href="#carousel-example-generic" role="button" data-slide="next" id="next_carousel" class="pull-right">
                  <span class="glyphicon glyphicon-chevron-right"></span>
              </a>


    </div><!-- First Carousel -->

    <div class="item" id="second_carousel"><!-- Second Carousel -->

            <a class="col-xs-1" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left"></span>
            </a>

          <strong>My Details</strong>          


    </div><!-- Second Carousel -->


 </div>  
</div>

</div> <!-- Well -->
</div> <!-- Container -->


</body>
</html>

当用户点击按钮时，我想导航到旋转木马的第二张幻灯片。我尝试了动作=＆＃34;＃second_slide＆＃34;但它没有用。有没有使用jQuery或Bootstrap的其他解决方法？

这是我迄今为止所取得的成果 - http://jsbin.com/difawayufa/edit?html,output

Answer 1

您可以使用以下命令使用jquery执行此操作：

<input type="button" id="myButton" value="click" onclick=" $('#carousel-example-generic').carousel('next');"/>

您还可以使用： $（ '＃转盘-示例泛型'）传送带（ '分组'）;

如果您想转到上一张幻灯片

编辑：如果要转到特定幻灯片，可以使用幻灯片的索引：

<input type="button" id="myButton" value="click" onclick=" $('#carousel-example-generic').carousel(1);"/>

如何使用按钮导航Bootstrap中的轮播？

1 个答案: