Bootstrap 4 carousel - images stacking -slider doesn't work
4 posts by 2 authors in: Forums > CMS Builder
Last Post: September 28, 2023 (RSS)
By dmn - September 27, 2023
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.
Hi, dmm.
I'm not familiar with the Bootstarap carousel, but at first glance I'm seeing a code difference between the two links you provided that might matter.
The "carousel-item" class is not indicated for the divs of the dynamic example slides (those show it as "item"), so those images are likely not positioning correctly.
STATIC EXAMPLE:
<div class="carousel-item active"><img src="img/demo-sma.png" alt="Image 1" class="d-block w-100">
DYNAMIC EXAMPLE:
<div class="item"><img src="/cmsb/uploads/demo-sma-1.png" width="1000" height="667" alt="slide" class="d-block w-100">~ Deborah
By dmn - September 28, 2023
Thank you Deborah, you saw what I had not seen for a couple of hours, I had looked at it for so long I was missing the obvious. It's working great.
Happens to us all - and to me, more than most!
Glad the carousel is working.