Changing a bootstrap carousel's index with jquery reactivates auto-play

What I want to do:
I have a bootstrap carousel and 5 divs. When I hover on the first div I want to show the first carousel-item...etc

What I did:
I deactivated the auto play with data-interval="false"
When hovering those controlling items, the following function is called:

function changeImage(index) {
        $("#carousel").carousel(index);   // index is the active carousel-item's index
}

What happened:
Before hovering on any controlling item, the carousel doesn't auto play.
After hovering on any controlling item, the carousel displays the expected carousel-item, however the carousel starts auto-playing.

What I tried:
Using Jquery I set the interval to false after each time I navigate in the carousel:

function changeImage(index) {
        $("#carousel").carousel(index);
        $('#carousel').carousel({
            interval: false
        })
}

But it didn't work.

Full code:

<div id="carousel" class="carousel slide" data-interval="false">
    <div class="carousel-inner">
        <div class="carousel-item">
            <img src="..."/>
        </div>
        <div class="carousel-item active">
            <img src="..."/>
        </div>
        <div class="carousel-item">
            <img src="..."/>
        </div>
        <div class="carousel-item">
            <img src="..."/>
        </div>
    </div>
</div>
<div id="controls">
   <div onmouseover="changeImage(0)">1</div>
   <div onmouseover="changeImage(1)">2</div>
   <div onmouseover="changeImage(2)">3</div>
   <div onmouseover="changeImage(3)">4</div>
   <div onmouseover="changeImage(4)">5</div>
</div>
<script>
    $('#carousel').on('slide.bs.carousel', function () {
        $('#carousel').carousel({
            interval: false
        })
    })
    function changeImage(index) {
        $("#carousel").carousel(index);
    }
</script>