Bootstrap slider (carousel) in wordpress

I was optimizing the web but I realized that the plugin I used for the page slider slowed it down a lot (and made it weigh a lot more) so since I'm using bootstrap, I decided to make a new one with code. The problem is that it shows absolutely nothing with the code that I have done. I want it dynamized, so that they can modify it, so through the CPT-UI I created a post called "slider" to which I left the title and the header image and with the Custom Advanced Fields, create a Field Group called slider "post type is equal to slider". After this I went to the posts and called each one "img1", "img2", "img3" and "img4", each one with its corresponding image. Once this was done, I went to index.php (the template I'm using) and put the following code:

<div id="contenedorSlider">
<div class="row"><div class="col-lg-12 col-sm-12 col-md-12 hidden-xs">

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
<?php
$my_query = new WP_Query(array (
'post_type' => 'slider',
'post_per_page' => -1
));
while($my_query->have_posts ()) {
    $my_query->the_post();

       ?>
 <li data-target="#carousel-example-generic">
   <img src="<?php the_post_thumbnail_url() ?>" class="img-responsive" />
   </li> 
    <?php
}
?>
  </ol>
<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></div></div>

With this code all you see is this (image), which has a link and lowers the screen a bit, but it is not what you should do. (The blue part is from the header below where the slider should go).

In the header I have javascript 3.3.6 and the same as the css. From Jquery, I have version 1.12.2.

EDIT: I found a way to show the slider, using this code, but now the arrows of the slider do not work (that is, they do not advance the image if you do not limit the page a bit). I suspect that it makes some kind of interference with my scroll but the tests I have done, with javascript, have not worked (I have the jquery before the javascript in the header). Now I also add the code of my scroll:

Slider Code:

<?php $diapositivesloop = new WP_Query( array( 'post_type' => 'slider', 'posts_per_page' => -1 ) ); ?>
    <?php $i=1; ?>
<div id="carousel-example-generic" class="carousel slide carousel-fade center-block" 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">
    <?php while ( $diapositivesloop->have_posts() ) : $diapositivesloop->the_post(); ?>
            <div class="item <?php if ($i == 1) echo 'active'; ?>">
                <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>" alt="centroSlider">
                <div class="carousel-caption">

                </div>
            </div>

    <!-- End of the loop -->
    <?php $i++; ?>
    <?php endwhile; wp_reset_query(); 
?>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">‹</a>

 <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">›</a>
    </div>
</div>

Scroll Code:

 <script>
 $(function() {
 if(window.location.hash) {
 var targetName = $(window.location.hash).selector;
 var target = $('[name=' + targetName.slice(1) +']');
 if (target.length) {
 $('html, body').animate({
    scrollTop: target.offset().top-80
  }, 1);
  return true;
}
 }
 });
 $('a[href*="#"]:not([href="#"])').click(function(e) {
      if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 var target = $(this.hash);      
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top-80
          }, {duration:1000,queue:false});
 return false;
        }
      }
     });
  </script>