Control Bootstrap Carousel Slides using Buttons - html

Question

I want to control the scroll of this carousel using menu bar where there are buttons 1,2,3,4,5 when I click them the carousel should slide to 2nd slide or 3rd slide like that.
I have used HTML, Bootstrap, CSS.
<div class="container-fluid">
<div class="row" id="row1">
<div class="col-sm-12" style="top: 10%; bottom: 50%;">
<h1>AS</h1>
</div>
</div>
<div class="row" id="row2">
<div class="col-sm-4" style="top: 10%; bottom: 50%; background-color: white; height: 7.4vh">
<h1 style="color: black">AS</h1>
</div>
<div class="col-sm-8" style="top: 10%; bottom: 50%; background-color: black">
<div class="nav">
<ul>
<li class="contact">1</li>
<li class="contact1">2</li>
<li class="about">3</li>
<li class="about1">4</li>
<li class="tutorials">5</li>
</ul>
</div>
</div>
</div>
<div class="row" id="row3">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox" style="vertical-align: top; position: absolute; background-color:green">
<div class="item active" id="one">
<h1>ABC</h1>
<div class="item" id="two">
<img src="img/B.jpg" alt="Chania">
</div>
<div class="item" id="three">
<img src="img/C.jpg" alt="Flower">
</div>
<div class="item" id="four">
<img src="img/C.jpg" alt="Flower">
</div>
<div class="item" id="five">
<img src="img/C.jpg" alt="Flower">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon glyphicon-menu-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon glyphicon-menu-right" aria-hidden="true"></span>
</a>
</div>
</div>
<div class="row" id="row4">
<div class="col-sm-12" style="top: 10%; bottom: 50%;">
<button class="button" onclick="Contact">Contact</button>
</div>
</div>
</div>

Answer 1

I'm not sure... Please check. Is it what you want to achieve?
You can place images in different slides.
Then use the .click() method to handle the click JavaScript event.
And call the .carousel(number) method:
Cycles the carousel to a particular frame (0 based, similar to an array).
See also:
the .eq() method
Reduce the set of matched elements to the one at the specified index.
the .index() method
If no argument is passed to the .index() method, the return value is an integer indicating the position of the first element within the jQuery object relative to its sibling elements.
the .find() method
Get the descendants <...> filtered by a selector <...>
the .children() method
Get the children of each element in the set of matched elements, optionally filtered by a selector.
the .parent() method
<...> traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
<...> travels a single level up the DOM tree.
the .prev() method
Get the immediately preceding sibling <...>
For example: http://codepen.io/glebkema/pen/qayLYY
var myCarousel = $('#myCarousel');
var myNav = myCarousel.prev();
myNav.find('li > a').click(function() {
var newIndex = $(this).parent().index();
myCarousel.carousel( newIndex );
});
myCarousel.on('slid.bs.carousel', function () {
var newIndex = $(this).find('.carousel-inner>.active').index();
var newLI = myNav.children().eq( newIndex );
if ( !newLI.hasClass('active') ) {
myNav.find('li.active').removeClass('active');
newLI.addClass('active');
}
});
/* Make the images wide and responsive. */
.carousel-inner img {
height: auto;
width: 100%;
}
/* Count nav-pills */
.nav {
counter-reset: number;
padding: 12px 0;
}
.nav > li > a:before {
content: counter(number);
counter-increment: number;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-pills">
<li role="presentation" class="active"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
<li role="presentation"></li>
</ul>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://via.placeholder.com/900x300/c69/fff/?text=1" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/900x300/9c6/fff/?text=2" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/900x300/69c/fff/?text=3" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/900x300/c33/fff/?text=4" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/900x300/099/fff/?text=5" alt="">
</div>
<div class="item">
<img src="https://via.placeholder.com/900x300/f93/fff/?text=6" alt="">
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>