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 absolutely nothing is displayed with the code I have made. I want it dynamic, so that they can modify it, so using 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, I created a Field Group called slider in a way "post type is equal to slider". After this I have gone to the posts and I have called each one "img1" , "img2", "img3" and "img4", each one with its corresponding image. Once this was done, I went to index.

<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 pulls the screen down a bit, but that's not what it 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 with css. From Jquery, I have version 1.12.2 .

EDIT: I found a way to show the slider, using this code, but now the slider arrows don't work (that is, they don't advance the image, they just scroll down the page a bit). I suspect that it does 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>