javascript html css carousel html-heading

Heading on Carousel Images

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });

  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});

.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f; background: white; padding: .1em 0em; border: thin #828280; border-radius: 40px;}

<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="carousel-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f">Plastic Valve Tags</h2>
              <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Panel Labels</h2><br>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Control Panel Facing</h2>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>Plastic Warning Labels</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>And More</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>

My carousel Headings are all ontop of the images, I'd like for them to be below the images but still within the carousel so that they move as one. The carousel works so its a styling issue not broken code :) I'm very new at JavaScript so it could be as simple as the JavaScript places the Headers where they are but I can't figure out how to reposition them:/

This is my HTML for the Carousel, It works perfectly i solely have issue with the heading placement.

<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="carousel-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f">Plastic Valve Tags</h2>
              <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Panel Labels</h2><br>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="carousel-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f">Plastic Control Panel Facing</h2>
               <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>Plastic Warning Labels</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="carousel-caption justify-content-center align-items-center">
              <div>
               <h2>And More</h2>
                <a href="contact.html"><button type="button" class="btn btn-primary">Contact to Order</button></a>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>

This is the CSS

.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f; background: white; padding: .1em 0em; border: thin #828280; border-radius: 40px;}

Note: I had to add a white background to the headings for them to be legible in their current position, but this obviously means all headings on the entire site have a white box :/ And here is the JavaScript

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });
   
  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});

Solution

The correct answer was the use of the 'carousel-caption' class in the code auto-positioning the headers. Changing this to 'car-caption' solved the issue. The buttons were also used incorrectly and have been updated here is the corrected code for anyone with the same issue:)

var $item = $('.carousel .item'); 
var $wHeight = $(window).height();
$item.eq(0).addClass('active');
$item.height($wHeight); 
$item.addClass('full-screen');

$(window).on('resize', function (){
  $wHeight = $(window).height();
  $item.height($wHeight);
});

$('.carousel img').each(function() {
  var $src = $(this).attr('src');
  var $color = $(this).attr('data-color');
  $(this).parent().css({
    'background-image' : 'url(' + $src + ')',
    'background-color' : $color
  });
  $(this).remove();
});

//Pause/play buttons

 $(document).ready(function(){
  //$("#mycarousel").carousel( { interval: 2000 } );
  $("#carousel-pause").click(function(){
    $("#mycarousel").carousel('pause');
  });
   
  $("#carousel-play").click(function(){
    $("#mycarousel").carousel('cycle');
  });
});

.carousel {background:#444;}
.carousel-item .img-fluid {width:100%; max-height: 70vh;}
.carousel-item a {display: block; width:100%;}
header p{color: #20317f; background: white; padding: 1em; border: thin #828280; border-radius: 40px;}
header h1, h2, h3{color: #20317f;}

<div id="carousel-2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="6000">
        <ol class="carousel-indicators">
            <li data-target="#carousel-2" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-2" data-slide-to="1"></li>
            <li data-target="#carousel-2" data-slide-to="2"></li>
            <li data-target="#carousel-2" data-slide-to="3"></li>
            <li data-target="#carousel-2" data-slide-to="4"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
         <div class="carousel-item active">
          <img src="pics/tags.png" alt="responsive image" class="d-block img-fluid">
           <div class="car-caption justify-content-center align-items-center">
            <div>
             <h2 style="color: #20317f" align="center"><a href="contact.html">Plastic Valve Tags</a></h2><br>
            </div>
           </div>
          </div>
          <div class="carousel-item">
           <img src="pics/logic.png" alt="responsive image" class="d-block img-fluid">
            <div class="car-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f" align="center"><a href="contact.html">Plastic Panel Labels</a></h2><br>
             </div>
            </div>
          </div>
          <div class="carousel-item">
           <img src="pics/skate.png" alt="responsive image" class="d-block img-fluid">
            <div class="car-caption justify-content-center align-items-center">
             <div>
              <h2 style="color: #20317f" align="center"><a href="contact.html">Plastic Control Panel Facing</a></h2><br>
              </div>
             </div>
           </div>
           <div class="carousel-item">
            <img src="pics/warn.png" alt="responsive image" class="d-block img-fluid">
             <div class="car-caption justify-content-center align-items-center">
              <div>
               <h2 align="center"><a href="contact.html">Plastic Warning Labels</a></h2><br>
              </div>
             </div>
            </div>
             <div class="carousel-item">
            <img src="pics/more.png" alt="responsive image" class="d-block img-fluid">
             <div class="car-caption justify-content-center align-items-center">
              <div>
               <h2 align="center"><a href="contact.html">And More</a></h2><br>
              </div>
             </div>
            </div>
           </div>
           <a class="carousel-control-prev" href="#carousel-2" role="button" data-slide="prev">
            <span class="car-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
           </a>
           <a class="carousel-control-next" href="#carousel-2" role="button" data-slide="next">
            <span class="car-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
           </a>
          </div>