Как перемещаться по карусели в Bootstrap с помощью кнопки?

У меня есть следующий код,Как перемещаться по карусели в Bootstrap с помощью кнопки?

<!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>

Когда пользователь нажимает на кнопку, я хочу, чтобы перейти к 2-м слайде карусели. Я попробовал action = "# second_slide", но это не сработало. Есть ли другой способ обхода использования jQuery или Bootstrap?

Вот что у меня до сих пор - http://jsbin.com/difawayufa/edit?html,output

источник

2016-04-07 Kemat Rochi

HTTP: // WWW. w3schools.com/bootstrap/tryit.asp?filename=trybs_carousel&stacked=h, пожалуйста, обратитесь к этому. – smraj

@smraj - Это слишком просто. В любом случае выяснилось, что я искал из приведенного ниже ответа. –

Вы можете сделать это с помощью JQuery со следующим:

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

Вы также можете использовать: $ ('# карусельного пример-родового ') .carousel (' пред ');

Если вы хотите, чтобы перейти к предыдущему слайду

EDIT: Если вы хотите, чтобы перейти к определенному слайду, вы можете использовать индекс слайда:

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

источник

2016-04-07 08:58:35 Kypaz

Но если я снова нажму кнопку, он вернется в Slide-1. Я хочу, чтобы кнопка переходила к следующему - если я нажму на нее второй раз, она останется в этом слайде. Можно ли добиться этого в jQuery? –

Вы можете использовать id: Пойдет только на второй слайд – Kypaz

Работает как шарм. Вы спасли мою жизнь. Огромное спасибо :) –

Как перемещаться по карусели в Bootstrap с помощью кнопки?

ответ

Смежные вопросы