Can't pause bootstrap carousel.

[TimurB]

I've been trying to pause the carousel to no avail I've tried the following:
invoking carousel('pause') 
invoking carousel.attr({interval:false})

changing the data-attr in the HTML tags (data-interval)

since it does pause on hover I've tried to manually trigger a hover event using .trigger('mouseover') and .trigger('mouseenter')

none of these work, when the pause or interval functions are invoked the animation that makes a smooth transition breaks but it still slides/cycles the carousel.

 

Context: I've added the videos into the carousel but I don't want the carousel to auto-cycle when you are watching a video, therefore when the video is played it should pause the carousel and vice-versa.

Here is my code:

        const carousel = $(".carousel")
        let iframes = $(".vimeo-iframe");
        let jsVids = $(".video-js")
        let playersVimeo = [];
        let playersJS = [];
        let paused = false;


        for (let i = 0; i < jsVids.length; i++) {
            console.log(jsVids[i].id)
            let player = videojs(jsVids[i].id)
            playersJS.push(player);
        }

        console.log("HELLO")

        for (let i = 0; i < iframes.length; i++) {
            iframe = iframes.get(i);
            let player = new Vimeo.Player(iframe);
            player.on('pause', () => {
                //invoke something to cycle the carousel
            })
            player.on('play', () => {
                //invoke something to pause carousel
            })
            playersVimeo.push(player);
        }

        $("#carousel").on('slide.bs.carousel', () => {
            console.log("SCROLLING");
            playersVimeo.forEach(element => {
                element.pause()
            });
            playersJS.forEach(element => {
                element.pause()
            })
        })

I've left out the actual functions that are used to pause/cycle since they don't work. 

 

Has anyone encountered this issue as well? My code works on a separate bootstrap project but not on this one, I'm using Prestashop 1.7 and Bootstrap 4.0.0

 

Edited April 16 by TimurB
typos (see edit history)