How to play bootstrap 4 carousel on mouse hover WITH disabled autoplay on page load?

I have created a carousel with bootstrap 4. I got the cycle through on hover to work. However, The carousel autoplays when the page loads. Is there anyway to disable the autoplay on page load and have it be the first slide, only playing when the mouse hovers over it?

Also, when the mouse leaves, it pauses. When you hover over it again, it will play.

I have provided my HTML and JS below.

Thanks!

I've tried adding pause: true to the JS. that just pauses the entire carousel. I've also tried entering in the data-interval: 200 to the HTML and removing it from the JS. However, this only allows a singular cycle and pause to work, and doesn't work once I move the mouse onto the carousel and leave it.

     <div id="carouselWork" class="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="Work/Posters/1.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/2.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/3.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/4.jpg" style="width:100%;">
        </div>
        <div class="carousel-item">
            <img src="Work/Posters/5.jpg" style="width:100%;">
        </div>
      </div>
    </div>



$(document).ready(function() {

$('.carousel').carousel({
  interval: 200
})

$('#carouselWork').hover(function(){
   $(".carousel").carousel('cycle');
},function(){
   $(".carousel").carousel('pause');
});
});

Expected: When the page loads, I want the carousel to be paused. When I hover over the carousel, it will cycle through at the specified interval of 200. When I move my mouse outside of the carousel, it will pause.

Actual: The functionality of playing/pausing on hover works, but the carousel autoplays at the interval of 200 when the page loads.

Solution

you need to use data-* property for that, in HTML add

data-pause="true"

so, now you can pause interval in startup.

for enable autoplay when mouseEnter and disable autoplay when mouseLeave, you can use .on method in Jquery

$(".carousel").on("mouseenter",function() {
  $(this).carousel('cycle');
}).on("mouseleave", function() {
  $(this).carousel('pause');
});

for control mouseenter and mouseleave functions interval, you can use HTML data-* property again

data-interval="200"

LIVE SNIPPET

$(".carousel").on("mouseenter",function() {
  $(this).carousel('cycle');
}).on("mouseleave", function() {
  $(this).carousel('pause');
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div id="carouselWork" class="carousel slide bg-dark" data-pause="true" data-interval="200">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://picsum.photos/1920/720/?image=1" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=10" class="d-block w-100" alt="">
    </div>
    <div class="carousel-item">
      <img src="https://picsum.photos/1920/720/?image=20" class="d-block w-100" alt="">
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>