Identified the root cause of the issue to be the presence of 6 carousel items, each containing all the images. While the carousel does not wrap around, it cycles through all the items until reaching image 6.
The solution implemented may not be perfect, but it is effective. It involves making the previous and next buttons invisible when the last image in the carousel item is visible on the slide. However, this approach relies on a static set number of slides. Dynamically determining the number of visible slides proved challenging. Open to any suggestions or better solutions!
Check out the solution here:
$('#recipeCarousel').on('slid.bs.carousel', checkSlideWrap); //executed when user interacts with slides
$('#recipeCarousel').ready(checkSlideWrap); //executed when page loads to hide prev button initially
function checkSlideWrap()
{
var divLength = $('div.carousel-item').length;
var slides;
if ($(window).width() >= 992 )
slides = 3;
else if ($(window).width() >= 768 )
slides = 3;
else
slides = 1;
/* Hide left and right controls when showing first/last slides */
var $this = $('#recipeCarousel');
if ($('.carousel-inner .carousel-item:first').hasClass('active')) {
// Hide left arrow
$this.children('.carousel-control-prev.carousel-control').hide();
// Display right arrow
$this.children('.carousel-control-next.carousel-control').show();
} else if ($('.carousel-inner .carousel-item:gt(' + (slides - 1 - divLength) + ')').hasClass('active')) {
// Hide right arrow
$this.children('.carousel-control-next.carousel-control').hide();
// Display left arrow
$this.children('.carousel-control-prev.carousel-control').show();
} else {
$this.children('.carousel-control').show();
}
}