如何使自举轮播互动？

Question

I'm creating web site, and my carousel element isn't working.

I've created a folder "vendor" locally to include js and 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>

` And some script code to activate carousel

`<!--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});

}); ` I expected slides to be ineractive, but they're just in a row one after other

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>