Here is the code snippet I am currently working with:
<!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>
If the user clicks on the button, I would like to navigate to the second slide of the carousel. I attempted using action="#second_slide", but it was unsuccessful. Are there any other solutions using jQuery or Bootstrap that you can suggest?
This is what I have tried so far - http://jsbin.com/difawayufa/edit?html,output