ボタンをクリックするとメニューバーを使用してこのカルーセルのスクロールを制御したい場合は、カルーセルを2番目のスライドまたは3番目のスライドにスライドする必要があります。ボタンを使用してブートストラップカルーセルスライドを制御する
私は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"><a href="#one">1</a></li>
<li class="contact1"><a href="two">2</a></li>
<li class="about"><a href="#three">3</a></li>
<li class="about1"><a href="#four">4</a></li>
<li class="tutorials"><a href="#five">5</a></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>