javascript - 如何使引导轮播具有交互性？

Question

我正在创建网站，但我的轮播元素无法正常工作。

我在本地创建了一个文件夹“vendor”以包含 js 和 css bootstrap

 `<div class="row">
                <div class="col-md-6">
                    <h3>Hello Ukraine</h3>
                    <div id="myCarousel" class="carousel-slide" data-ride="carousel">
                        <!--Indicators-->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                            <li data-target="#myCarousel" data-slide-to="2"></li>
                            <li data-target="#myCarousel" data-slide-to="3"></li>
                          </ol>
                        <!--Wrappar for slides-->
                        <div class="carousel-inner">

                            <div class="item-active">
                                <img src="map_ukrain.gif" alt="Map" style="width:100%;">
                                <div class="carousel-caption">
                                  <h3>My country</h3>
                                </div>
                            </div>

                        <!-- Right and left control -->
                        <!-- Left and right controls -->
                        <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                          <span class="glyphicon glyphicon-chevron-left"></span>
                          <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" data-slide="next">
                          <span class="glyphicon glyphicon-chevron-right"></span>
                          <span class="sr-only">Next</span>
                        </a>

                    </div>
                </div>
            </div>

` 以及一些激活轮播的脚本代码

`<!--1.--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!--2--><script src="vendor/bootstrap/js/bootstrap.min.js"></script>
          <script>
           $(function(){
// Activate Carousel
$("#myCarousel").carousel({interval: 2000});

}); ` 我原以为幻灯片是静止的，但它们只是一个接一个地排成一排

Answer 1

In ol tag add CSS its come in row-

 <ol class="carousel-indicators" style="display:inline-flex">
                        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                        <li data-target="#myCarousel" data-slide-to="1"></li>
                        <li data-target="#myCarousel" data-slide-to="2"></li>
                        <li data-target="#myCarousel" data-slide-to="3"></li>
                        <li data-target="#myCarousel" data-slide-
                    </ol>