Develop Reference

Carousel slider does not work after bootstrap 4 update with

I am trying to upgrade the bootstrap from 3.3.4 to 4.1.3. To do that I have just replaced the contents of the bootstrap.js with the 4.1.3. I was hoping that this would be it, however, after doing this the slider does not work. Carousel comes up but the images do not slide and the controls also do not work.
I understand that a similar question has already been answered, but trust me they have not worked for me. It's been 3 days since I have been struggling with this, so putting out here in case someone can point me in the right direction.
jquery-v3.3.1.html
<script src='<%=Server.getApplURL()%>/../common/JS/jquery/v-3.3.1/jquery-3.3.1.min.js'></script>
Now this file is included in the header file
header.jsp
<%#include file="/../jshtml/jquery-v3.3.1.html"%>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/jquery.min.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/popper.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/bootstrap.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/plugins.js"></script>
<!-- Scripts that run onLoad -->
<script>
$('.carousel').carousel({});
</script>
Now, this header file is included in the main jsp page which has the code for the carousel. I think this is enough for making sure bootstrap.js, popper.js, and jquery.js are available to the code.
I have changed few things and right now both the slides are same. This code as it is also does not work.
Question:
This carousel does not work and I do not see any errors also anywhere in Chrome dev tools. Any suggestion on how I can see the real error?
home.jsp
<%# include file="../common/header.jsp"%>
<div id="carousel-main" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
<!-- Indicators -->
<ul class="carousel-indicators">
<%
while(itr.hasNext())
{
com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
if(sliderCounter == 0)
{
%>
<li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>" class="active"></li>
<%
}
else
{
%>
<li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>"></li>
<%
}
sliderCounter++;
}
%>
</ul>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<%
sliderCounter = 0;
itr = SliderDtlsList.iterator();
while(itr.hasNext())
{
com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
String imagepath = sliderbn.getFilePath();
String sliderUrl = sliderbn.PathUrl();
String sliderType = sliderbn.getFileType();
DelimitedString altText = new DelimitedString( sliderbn.getAltText());
String actualAltText = altText.getString(1);
String headerAltText = altText.getString(2);
if(sliderCounter == 0)
{
if("Link".equalsIgnoreCase(sliderType))
{
%>
<div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
<div class="carousel-image"
style="background-image: url('<%=imagepath%>')">
<div class="carousel-caption">
<h3><%=headerAltText%></h3>
<p><%=actualAltText%></p>
</div>
</div>
</div>
<div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
<div class="carousel-image"
style="background-image: url('<%=imagepath%>')">
<div class="carousel-caption">
<h3><%=headerAltText%></h3>
<p><%=actualAltText%></p>
</div>
</div>
<%
}
}
sliderCounter++;
}
%>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-main"
role="button" data-slide="prev"> <span
class="fa-chevron-left" aria-hidden="true"></span> <span
class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-main"
role="button" data-slide="next"> <span
class="fa-chevron-right" aria-hidden="true"></span> <span
class="sr-only">Next</span>
</a>
</div>
</div>
<!-- END: Slider container -->
</div>
</div>
<%
}
%>
<!-- END: slider -->

If you have updated to BS4 from BS3 then you need to change the classes for slides in your code from item to carousel-item as in BS4 they have made few changes.
So you can simply do this to all your slide divs
<div class="carousel-item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
aria-label="<%=actualAltText%>">
and make sure to add active class also to first slide in the carousel code.
Hope it helps

Why is Bootstrap 4 carousel pause function not working when it's getting called from the event of an element inside of the carousel?

So I was trying to wrap my head around this issue, and I asked the question yesterday:
Carousel('pause') isn't working on mobile devices
I found the symptom so I'm asking a new question with a new focus.
The question title is not telling everything, because it would be too large:
This is only happening on phones, using mobile browsers, On desktop is totally fine.
Basically, if you have a Bootstrap 4 carousel, and you have any element that is inside of the div with the id of the carousel and you want to attach an event on that element (like a click) to pause the carousel, it wont work AT ALL, the slider keeps cycling.
I've tried click, mousedown, mouseup, I've tried setting the selector's click event on body, tried calling a click event on a selector that is outside to pause it, used parents, etc, and it wouldn't work.
Created a button that is right outside the carousel, attached a click event to it and it works.
I'm using the latest BS (4.4.1)
This is my code:
Blade file:
<div id='slider'>
<button class='pause-carousel' role='button'>Pause from outside</button>
<div id='sme-directory-gallery' class='carousel slide' data-ride='carousel'>
<button class='pause-carousel-2' role='button'>Pause from inside</button>
<div class='carousel-inner'>
#foreach($directoryInfo->videos as $index => $video)
<div class='item carousel-item {{ $index === 0 ? 'active' : '' }}' data-slide-number='{{ $index }}'>
<div class='video-mask'></div>
<div class='d-flex justify-content-center'>
<div class='embed-responsive embed-responsive-21by9'>
<iframe class='embed-responsive-item player' src='{{ 'https://www.youtube.com/embed/' . substr($video->url, strrpos($video->url, 'v=') + 2) }}' allowfullscreen></iframe>
</div>
</div>
</div>
#endforeach
#foreach($directoryInfo->images as $index => $image)
<div class='item carousel-item {{ ($index + sizeof($directoryInfo->videos)) === 0 ? 'active' : '' }}' data-slide-number='{{ $index + sizeof($directoryInfo->videos) }}'>
<div class='d-flex justify-content-center'>
<img src='{{ asset('storage/' . $image->path) }}' class='img-fluid' alt='imagen'>
</div>
</div>
#endforeach
<a class='carousel-control-prev' href='#sme-directory-gallery' role='button' data-slide='prev'>
<div class='rounded-circle'>
<span class='carousel-control-prev-icon' aria-hidden='true'></span>
<span class='sr-only'>Previous</span>
</div>
</a>
<a class='carousel-control-next' href='#sme-directory-gallery' role='button' data-slide='next'>
<div class='rounded-circle'>
<span class='carousel-control-next-icon' aria-hidden='true'></span>
<span class='sr-only'>Next</span>
</div>
</a>
</div>
<ul class='carousel-indicators list-inline'>
#foreach($directoryInfo->videos as $index => $video)
<li class='list-inline-item my-2 {{ $index === 0 ? 'active' : '' }}'>
<a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' class='sme-gallery-anchor' data-slide-to='{{ $index }}' data-target='#sme-directory-gallery'>
<img src='{{ 'https://img.youtube.com/vi/' . substr($video->url, strrpos($video->url, 'v=') + 2) . '/mqdefault.jpg' }}' class='img-fluid'>
<div class='text-white sme-gallery-middle-icon'>
<span class='fas fa-play'></span>
</div>
</a>
</li>
#endforeach
#foreach($directoryInfo->images as $index => $image)
<li class='list-inline-item {{ $index + sizeof($directoryInfo->videos) === 0 ? 'active' : '' }}'>
<a id='carousel-selector-{{ $index + sizeof($directoryInfo->videos) }}' data-slide-to='{{ $index + sizeof($directoryInfo->videos) }}' data-target='#sme-directory-gallery'>
<img src='{{ asset('storage/' . $image->path) }}' class='img-fluid'>
</a>
</li>
#endforeach
</ul>
</div>
</div>
Javascript:
$(document).ready(function () {
$('.carousel-indicators').scrollLeft(0);
$('#sme-directory-gallery').carousel();
$('.pause-carousel').on('click', function () {
$('#sme-directory-gallery').carousel('pause'); // it works
});
$('.pause-carousel-2').on('click', function () {
$('#sme-directory-gallery').carousel('pause'); // it wont work
});
$('#sme-directory-gallery .video-mask').mouseup(function () {
var iframe = $(this).closest('.item').find('iframe');
var iframe_source = iframe.attr('src');
if (iframe_source.includes('?rel=0')) {
iframe_source = iframe_source.replace('?rel=0', '');
}
iframe_source = iframe_source + '?autoplay=1';
iframe.attr('src', iframe_source);
$(this).toggle();
$('#sme-directory-gallery').carousel('pause');
});
$('#sme-directory-gallery').on('slide.bs.carousel', function (e) {
$('#sme-directory-gallery').carousel('cycle');
var iframeID = $(this).find('iframe').attr('id');
if (iframeID != undefined) {
callPlayer(iframeID, 'stopVideo');
}
$('.video-mask').show();
$('#sme-directory-gallery').find('iframe').each(function (key, value) {
var url = $(this).attr('src');
if (url.includes('?autoplay')) {
var new_url = url.substring(0, url.indexOf('?'));
$(this).attr('src', new_url);
}
});
setTimeout(() => {
var scrollTo = $('.list-inline-item.active').position().left;
if ($('.list-inline-item.active').index() > 0) {
scrollTo = $('.list-inline-item.active').prev('.list-inline-item').position().left;
}
var finalOrFirst = 0;
if (e.direction === 'right') {
if ($('.list-inline-item.active').is(':last-child')) {
finalOrFirst = 99999;
}
} else {
if ($('.list-inline-item.active').is(':first-child')) {
finalOrFirst = -99999;
}
}
var currentScroll = $('.carousel-indicators').scrollLeft();
var scrollResult = currentScroll + scrollTo + finalOrFirst;
$('.carousel-indicators').animate({scrollLeft: scrollResult}, 500);
}, 10);
});
});
What exactly is happening here, how do I fix it?
Thanks in advance.

Try this to catch the issue:
Put console.log or alert() to check if event is triggered or not.
$('.pause-carousel-2').on('click', function () {
console.log('Button Clicked');
$('#sme-directory-gallery').carousel('pause'); // it wont work
});
Case 1:
If "Button Click" is not printed in console, then you may try:
$('body').on('click','.pause-carousel-2',function(){ ...
Case 2:
If "Button Click" is printed, then there is a workaround for this issue, which you can try.
Use Trigger
$('.pause-carousel-2').on('click', function () {
$('.pause-carousel').trigger("click");
});
and hide the Pause button which is outside
Please share your result, will try to fix your issue.

If you use .carousel() as a varaible it will work. var slider = $('#element').carousel(); And you can use in all events. slider.carousel('pause'); , for starting again: slider.carousel({'pause': false});
When you use multiple element click events:
$('#btn1, #btn2').click(function(){
slider.carousel('pause');
});
In an another event (hover):
$('#yourSlider').hover(function(){
slider.carousel('pause');
}, function(){
slider.carousel({'pause': false});
});
If you don't assign it to a variable, the carousel will be restarted
within each event.
I added an examp (it works):
$(function(){
var slider = $('#carouselExampleSlidesOnly').carousel({
interval: 1000
});
$('#pause').click(function(){
slider.carousel('pause');
});
$('#start').click(function(){
slider.carousel({'pause': false});
});
});
.carousel-item{
padding-top: 45px;
text-align: center;
height:150px;
width:100%;
color:#fff;
background-color: #666;
font-size: 2rem;
font-weight: 700;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container p-4">
<button id="pause" class="btn btn-sm btn-warning">Pause</button>
<button id="start" class="ml-2 btn btn-sm btn-primary">Start</button>
</div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" style="width: 90%; marign:auto">
<div class="carousel-inner">
<div class="carousel-item active">
Slide 1
</div>
<div class="carousel-item">
Slide 2
</div>
<div class="carousel-item">
Slide 3
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Set the pause to false and that will take care of the issue
$('.carousel').carousel({
pause: "false"
});
you can see an example here: https://jsfiddle.net/KyleMit/XFcSv/

I have a problem similar to this one: in some case the code doesn't work in some case works. The only difference I have found is about the presence of the class "pointer-event" in the tag of the carousel element.
To solve this problem I have use a boolean variable with the event "slide.bs.carousel" to avoid carousel to slide when paused.
HTML CODE
<section id="slideshow" class="carousel slide">
<div class="carousel-inner" id="images" >
<div class="carousel-item " >
<img src="..." class="d-block w-100" alt='bla bla bla' >
</div>
<div class="carousel-item " >
<img src="..." class="d-block w-100" alt='bla bla bla' >
</div>
<div class="carousel-item " >
<img src="..." class="d-block w-100" alt='bla bla bla' >
</div>
</div>
<a class="carousel-control-pause" href="#slideshow" role="button" >
<span class="pause-icon">
||
</span>
<span class="play-icon d-none">
|>
</span>
</a>
<a class="carousel-control-prev" href="#slideshow" role="button" data-slide="prev" >
<--
</a>
<a class="carousel-control-next" href="#slideshow" role="button" data-slide="next" >
-->
</a>
</section>
JAVASCRIPT CODE
$(document).ready(function(){
var carousel = $('#slideshow').carousel({
interval: 5000,
ride: true
});
var carousel_paused = false;
//on init the carousel is paused
$('#slideshow .carousel-control-pause').on('click', function(e){
e.preventDefault();
var hideclass= "d-none";
var pause= $(this).children(".pause-icon");
if( $(pause).is(":hidden"))
{
//play
$(pause).removeClass(hideclass);
$(this).children(".play-icon").addClass(hideclass);
carousel.carousel('cycle');
carousel_paused = false;
}
else
{
//pause
$(pause).addClass(hideclass);
$(this).children(".play-icon").removeClass(hideclass);
carousel.carousel('pause');
carousel_paused = true;
}
});
carousel.on('slide.bs.carousel', function (e) {
console.log("slide pre");
//prevent slide if paused
if(carousel_paused)
e.preventDefault();
});
carousel.on('slid.bs.carousel', function (e) {
console.log("slide done");
});
});
The code is for example and is not tested in mobile.

How to load JSP page on next/prev click of Bootstrap carousel

Earlier I had scrollbar, where different icons were displayed. on click of particular icon, jsp page was displayed. but i need to replaced it with carousel.
on next/prev click following function should be called:
function testing(index) {
var tableLength = tableAddArray.length;
for (var i = 0; i < tableLength; i++) {
if (i == index) {
selectedElement= tableAddArray[i].id;
}
console.log("selectedElement:: "+selectedElement);
}
createElement();
}
function createElement() {
var request ="/xyzz/abcdd?objectName=";
var attributesToSend = "&action=add" ;
attributesToSend += "&ref="+document.getElementsByName("ref")[0].value ;
document.getElementsByName("action")[0].value = "add";
if (selectedElement != null) { request += selectedElement;
if (selectedElement == "1") {equest += "&condOp=5"; }
else if (selectedElement == "2") {request += "&dest=2";}
request += attributesToSend; location.href=request;
//from here other processing is done to get corresponding data from DB
}
}
then in carousel,:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item">
<c:choose>
<c:when test="${requestScope.objectName == '2'}">
<jsp:include page="2nd_Slide.jsp"></jsp:include> </c:when>
<c:when test="${requestScope.objectName == '3'}">
<jsp:include page="3rd_slide.jsp"></jsp:include> </c:when>
</c:choose>
</div>
<a class="carousel-control-prev" ..>
<a class="carousel-control-next" ..>
</div>
Hence i need to set objectname at 0th index as well. I dont know how to call js before 0th slide of carousel is shown.

You might wanna register an event handler on slide action of the carousel. Something like this
$('#carousel_id').on('slide.bs.carousel', function ()
//load jsp like before with click on icons
)
Set some id on the element that needs to trigger jsp load
NOTE: check out slid.bs.carousel for post slide event handling
EDIT:
Try:
<div id="carouselExampleControls" class="carousel slide" data- ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p class="d-block w-100">
Slide 1
<div id="jspdiv1"></div>
</p>
</div>
<div class="carousel-item">
<p class="d-block w-100">
Slide 2
<div id="jspdiv2"></div>
</p>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
var ind = 0;
$('#carouselExampleControls').bind('slid.bs.carousel', function (e) {
if(e.direction =='right'){
ind++;
console.log("right "+ind);
$("#jspdiv1").text("Slided right "+ind);
}
else if(e.direction == 'left'){
ind--;
console.log("left "+ind);
$("#jspdiv2").text("Slided left "+ind);
}
console.log(e);
});
</script>

Remove carousel arrows if the image is not loaded

I am currently trying to remove the arrows from the carousel when there is no image present. The reason for me trying to do so, is simply because I am trying to load several images into a carousel from a database into a given section. This section is recreated multiple times and it doesn't always contain images.
The issue that I am having is that, whenever the bootstrap carousel doesn't have any images loaded, it just displays the carousel arrows on the side. This gives a bad look to the current section and I would like to dispose of that.
How can I remove the carousel arrows when there aren't any images
loaded in the carousel?
Here is a JsFiddle which contains what I've done so far, it is heavy inspired by several other posts. This only removes the left arrow on the first slide and the right arrow on the last slide.
Here you can preview how does the carousel look whenever there are absent images. I have set a black background of 400px in order for the arrows to be more easily spotted. Absent Images JsFiddle
Here is the code I have so far:
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/770x300&text=three"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/770x300&text=four"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/770x300&text=five"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/770x300&text=six"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next" id="arrow-right">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
</div>
JQuery Code:
jQuery(document).ready(function($) {
$('.carousel').carousel({
interval: false,
})
$(document).ready(function () { // on document ready
checkitem();
});
$('#myCarousel').on('slid.bs.carousel', checkitem);
function checkitem() // check function
{
var $this = $('#myCarousel');
if ($('.carousel-inner .item:first').hasClass('active')) {
$this.children('.left.carousel-control').hide();
} else if ($('.carousel-inner .item:last').hasClass('active')) {
$this.children('.right.carousel-control').hide();
} else {
$this.children('.carousel-control').show();
}
}
$("img").error(function(){
$(this).hide('#arrow-right');
});
});
Here are the answers that I've already checked for solutions:
Link 1Link 2
Thank you in advance.

Using jQuery you could try something like..
$(document).ready(function(){
if($('.carousel-inner .item img').attr('src') == '') {
$('.carousel-control').css('display', 'none');
}
});
fiddle

Trying to stop bootstrap carousel from pausing on hover

I have a bootstrap carousel with a progress bar that fill up and triggers the next slide. My problem is that right now the carousel pauses when i hover the mouse over the slides and i want it to not pause and keep going.
Here is my code:
$(document).ready(function(){
var percent = 0,
interval =35//it takes about 6s, interval=20 takes about 4s
$bar = $('#progress-bar'),
$crsl = $('#carousel-hero');
$('.carousel-indicators li, .carousel-control').click(function (){$bar.css({width:0.5+'%'});});
/*line above just for showing when controls are clicked the bar goes to 0.5% to make more friendly,
if you want when clicked set bar empty, change on width:0.5 to width:0*/
$crsl.carousel({//initialize
interval: false,
pause: false
}).on('slide.bs.carousel', function (){percent = 0;});//This event fires immediately when the bootstrap slide instance method is invoked.
function progressBarCarousel() {
$bar.css({width:percent+'%'});
percent = percent +0.5;
if (percent>=100) {
percent=0;
$crsl.carousel('next');
}
}
var barInterval = setInterval(progressBarCarousel, interval);//set interval to progressBarCarousel function
if (!(/Mobi/.test(navigator.userAgent))) {//tests if it isn't mobile
$crsl.hover(function(){
clearInterval(barInterval);
},
function(){
barInterval = setInterval(progressBarCarousel, interval);
}
);
}
});
And my HTML :
<div id="carousel-hero" class="carousel slide" data-ride="carousel"><!-- Main Slider -->
<ol class="carousel-indicators">
<li data-target="#carousel-hero" data-slide-to="0" class="active"></li>
<li data-target="#carousel-hero" data-slide-to="1"></li>
<li data-target="#carousel-hero" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active"><!-- First Slide -->
<div class="overlay"></div>
<img src="images/hero1.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE ARE <span class="colored">NIXO</span> CREATIVE</h1>
<h5>Branding | Design | Developement</h5>
</div>
</div>
<div class="item"><!-- Second Slide -->
<div class="overlay"></div>
<img src="images/hero2.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">ALWAYS</span> DELIVER</h1>
<h5>UX | Marketing | Ideas</h5>
</div>
</div>
<div class="item"><!-- Third Slide -->
<div class="overlay"></div>
<img src="images/hero3.jpg" alt="hero-image" class="img-responsive">
<div class="carousel-caption"><!-- Tagline -->
<h1 class="tagline">WE <span class="colored">LOVE</span> DESIGN</h1>
<h5>Beautiful | Clean | Inspiring</h5>
</div>
</div>
<!-- Carousel Controlls -->
<a id="hero-control-left" class="control-hero control-left" href="#carousel-hero" role="button" data-slide="prev">
<span class="pe-7s-angle-left pe-4x" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a id="hero-control-right" class="control-hero control-right" href="#carousel-hero" role="button" data-slide="next">
<span class="pe-7s-angle-right pe-4x" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div id="progress-bar"></div> <!-- Carousel Progress Bar -->
</div>
THINGS I'VE TRIED:
in the js file setting pause: 'none'
adding data-pause="false" to the carousel
having puase: false and data-pause="false" at the same time
Any help is apreciated.

Set Pause to null and data-pause="false"
$crsl.carousel({//initialize
interval: false,
pause: null
})
<div id="carousel-hero" class="carousel slide" data-ride="carousel" data-pause="null">
Read more about the carousel options here
https://v4-alpha.getbootstrap.com/components/carousel/#options
For avoiding the progress bar stop remove the code for crsl.hover which clears interval for the progress bar and restart it on blur.
Working Example : https://jsfiddle.net/ne9x9Lp1/

I had the same problem. Just solved it by changing the bootstrap js file (in my case bootstrap.bundle.min.js)
ctrl+f=pause to make it easy to find, it was pause:"hover" and I change it for:
pause:"false"
hope this helps.