如何将引导滑块放置在包含 fon 的部分以完美显示滑块？

如何解决如何将引导滑块放置在包含 fon 的部分以完美显示滑块？

我有一个页面，其中有一个包含图片作为 fon。在本节中，必须有一个带有四张图片的引导滑块，每张图片应每 4 秒更改一次。我可以看到一些滑块存在的迹象，但没有任何图像。这是视口：

滑块必须位于显示圆形图片的下部。如果滑块的宽度为 1000px 并且它在截面上水平居中会更好。

HTML：

        <section class="slider">

    <script type="text/javascript">
        $(document).ready(function(){
            $("#myCarousel").carousel({
                interval : 4000,pause: false
            });
        });
    </script>

        <!-- <script type="text/javascript">
            var i = 0;
            var time = 4000;
            var ims = [];

            ims[0] = "for_slider/1.jpg";
            ims[1] = "for_slider/2.png";
            ims[2] = "for_slider/3.jpg";
            ims[3] = "for_slider/4.jpg";

            function changeims()
            {
                document.slide.src = ims[i];

                if(i < ims.length - 1)
                    i++;
                else
                    i = 0;
                setTimeout("changeims()",time);
            }

            window.onload = changeims;
        </script> -->
        <!-- <button id="buttons_slider">L</button> -->

        <!-- <div class="inside_slider">
            <div id="sides"></div>

            <div class="center_slider">
                <img name="slide">
            </div>

            <div id="sides"></div>
        </div> -->

        <!-- <button id="buttons_slider" class="left-btn">L</button>
        <img name="slide">
        <button id="buttons_slider" class="right-btn">R</button> -->

        <!-- <div style="background-color: black; float: left; height: 100%; width: 300px"></div> -->

        <!-- <button id="buttons_slider">R</button> -->
        


        <!-- Bootstrap is lower! -->

        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
       <!-- Indicators -->
       <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
  </ol>

         <!-- Wrapper for slides -->
       <div class="carousel-inner" role="listBox">
       <div class="item active">
          <img src="for_slider\1.jpg" alt="one">
          <!-- <div class="carousel-caption">
            </div> -->
           </div>
      <div class="item">
        <img src="for_slider\2.png" alt="two">
       <!-- <div class="carousel-caption">
    
           </div> -->
       </div>

      <div class="item">
         <img src="for_slider\3.jpg" alt="three">
        <!-- <div class="carousel-caption">
    
      </div> -->
    </div>

<div class="item">
  <img src="for_slider\4.jpg" alt="four">
  <!-- <div class="carousel-caption">
    
    </div> -->
   </div>

 </div>
 
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
     </div>

    </section>