Bootstrap 4 carousel - images stacking -slider doesn't work

I have tried to create a dynamic bootstrap 4 slider with thumbs but slider isn't working and slides are stacking - I can't see what I'm missing, if anyone can see where I'm off please share. 

Here is a link to the page created in CMSB - https://www.webdesignprons.ca/example_dynamic_cms_carousel_slideshow.php

Here is a link to the identical slider only static - https://www.webdesignprons.ca/example-static.html

I include below code for both pages - first is cmsb slider page, second is static page, also if you look at the source code in the browser page everything seems fine.

CODE FOR CMSB BOOTSTRAP SLIDER

<!-- Main Carousel --> <div class="container">           

<div class="row">               

<div class="col-lg-12">

<div id="main-carousel" class="carousel slide carousel-fade" data-ride="carousel">   

<div class="carousel-inner">
      <ol class="carousel-indicators">
<?php foreach ($stockmodelsRecords as $record): ?>       
 <?php foreach ($record['slider_photos'] as $index => $upload): ?>         
<li data-target="#main-carousel" data-slide-to="<?php echo $index; ?>"<?php echo $index == 0 ? ' class="active"' : ''; ?>></li>         
<?php endforeach; ?>                  
<?php endforeach; ?>       
</ol>
<?php foreach ($stockmodelsRecords as $record): ?>       
 <?php foreach ($record['slider_photos'] as $index => $upload): ?>
<div class="item<?php echo $index == 0 ? ' active' : ''; ?>"><img src="<?php echo htmlencode($upload['urlPath']) ?>" width="<?php echo $upload['width'] ?>" height="<?php echo $upload['height'] ?>" alt="slide" class="d-block w-100">
<div class="container">         
<div class="carousel-caption text-center">  <p class="lead font-weight-bold">Slide 1</p>                     
</div>       
</div>          
</div>          <?php endforeach; ?>                 
<?php endforeach; ?>

      <a class="carousel-control-prev" href="#main-carousel" 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="#main-carousel" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span>        <span class="sr-only">Next</span>      </a>
    </div> <div id="carousel-thumbs" class="carousel slide mt-3">   
<div class="carousel-inner">                 
<div class="row"><?php foreach ($stockmodelsRecords as $record): ?>       
 <?php foreach ($record['slider_photos'] as $index => $upload): ?>         
<div class="col"><img src="<?php echo htmlencode($upload['thumbUrlPath']) ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="thumbnail" data-target="#main-carousel" data-slide-to="<?php echo $index; ?>"<?php echo $index == 0 ? ' class="active"' : ''; ?>>         
 </div><?php endforeach; ?>    
<?php endforeach; ?>                 
</div>     
</div>   
</div>     
</div> 
</div>
</div> </div>  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>

<script>

$(document).ready(function () {

$(".carousel").carousel({
interval: false,
pause: true,
touch: true
});

$(".carousel .carousel-inner").swipe({
swipeLeft: function (event, direction, distance, duration, fingerCount) {
this.parent().carousel("next");
},
swipeRight: function () {
this.parent().carousel("prev");
},
threshold: 0,
tap: function (event, target) {
window.location = $(this).find(".carousel-item.active a").attr("href");
},
excludedElements: "label, button, input, select, textarea, .noSwipe"
});

$(".carousel .carousel-control-prev").on("click", function () {
$(".carousel").carousel("prev");
});

$(".carousel .carousel-control-next").on("click", function () {
$(".carousel").carousel("next");
});

});

</script>

<script src="js/script.js"></script>


<!-- Main JS -->
<script src="js/main.js"></script>

CODE FOR STATIC BOOTSTRAP SLIDER

<!-- Main Carousel --> <div class="container">
<div class="row">
<div class="col-lg-12">
<div id="main-carousel" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<ol class="carousel-indicators">
<li data-target="#main-carousel" data-slide-to="0" class="active"></li>
<li data-target="#main-carousel" data-slide-to="1"></li>
<li data-target="#main-carousel" data-slide-to="2"></li>
<li data-target="#main-carousel" data-slide-to="3"></li>
<li data-target="#main-carousel" data-slide-to="4"></li>
<li data-target="#main-carousel" data-slide-to="5"></li>
<li data-target="#main-carousel" data-slide-to="6"></li>
<li data-target="#main-carousel" data-slide-to="7"></li>
</ol>
<div class="carousel-item active"><img src="img/demo-sma.png" alt="Image 1" class="d-block w-100">
<div class="container"> <div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-1.png" alt="Image 2" class="d-block w-100">
<div class="container"> <div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-2.png" alt="Image 3" class="d-block w-100">
<div class="container">
<div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-3.png" alt="Image 3" class="d-block w-100">
<div class="container">
<div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-4.png" alt="Image 3" class="d-block w-100">
<div class="container">
<div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-5.png" alt="Image 3" class="d-block w-100">
<div class="container">
<div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-6.png" alt="Image 3" class="d-block w-100">
<div class="container">
<div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
<div class="carousel-item"><img src="img/demo-sma-7.png" alt="Image 3" class="d-block w-100">
<div class="container">
<div class="carousel-caption text-center"><p class="lead font-weight-bold">Slide 1</p>
</div>
</div>
</div>
</div>
<!-- Next and Previous Buttons -->    
<a class="carousel-control-prev" href="#main-carousel" role="button" data-slide="prev"><span class="fa fa-circle-chevron-left fa-2x" aria-hidden="true"></span><span class="sr-only">Previous</span></a>   
<a class="carousel-control-next" href="#main-carousel" role="button" data-slide="next"><span class="fa fa-circle-chevron-right fa-2x" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div>
<!-- Thumbnail Navigation -->
<div id="carousel-thumbs" class="carousel slide mt-3">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col"><img src="img/demo-sma.png" alt="Thumbnail 1" data-target="#main-carousel" data-slide-to="0"> </div>
<div class="col"><img src="img/demo-sma-1.png" alt="Thumbnail 2" data-target="#main-carousel" data-slide-to="1"> </div>
<div class="col"><img src="img/demo-sma-2.png" alt="Thumbnail 3" data-target="#main-carousel" data-slide-to="2"> </div>
<div class="col"><img src="img/demo-sma-3.png" alt="Thumbnail 3" data-target="#main-carousel" data-slide-to="3"> </div>
<div class="col"><img src="img/demo-sma-4.png" alt="Thumbnail 3" data-target="#main-carousel" data-slide-to="4"> </div>
<div class="col"><img src="img/demo-sma-5.png" alt="Thumbnail 3" data-target="#main-carousel" data-slide-to="5"> </div>
<div class="col"><img src="img/demo-sma-6.png" alt="Thumbnail 3" data-target="#main-carousel" data-slide-to="6"> </div>
<div class="col"><img src="img/demo-sma-7.png" alt="Thumbnail 3" data-target="#main-carousel" data-slide-to="7"> </div>
</div>
</div>
</div>
</div>
<!-- Carousel End -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<script>$(document).ready(function () {
  $(".carousel").carousel({    interval: false,    pause: true,    touch: true  });
  $(".carousel .carousel-inner").swipe({    swipeLeft: function (event, direction, distance, duration, fingerCount) {      this.parent().carousel("next");    },    swipeRight: function () {      this.parent().carousel("prev");    },    threshold: 0,    tap: function (event, target) {      window.location = $(this).find(".carousel-item.active a").attr("href");    },    excludedElements: "label, button, input, select, textarea, .noSwipe"  });
  $(".carousel .carousel-control-prev").on("click", function () {    $(".carousel").carousel("prev");  });
  $(".carousel .carousel-control-next").on("click", function () {    $(".carousel").carousel("next");  });
});</script>

<script src="js/script.js"></script>

    <!-- Main JS --><script src="js/main.js"></script>

Any help to resolve this would be appreciated.