Carrossel de bootstrap 4: intervalo de dados individual em cada slide

Quero definir o intervalo de dados para cada slide do carrossel. Aqui no stackoverflow, encontrei um trecho de JavaScript para este caso, mas não funciona bem. (Duração do slide Carrossel de inicialização do Twitter) Cada slide tem seu intervalo de dados definido em linha em html com ms de 3000 a 7000 em cinco slides.

A duração real dos slides não se encaixa nas minhas expectativas e no código. Exemplo: defino o intervalo para 3000 e o slide é mostrado em torno de 7-8 segundos.

O arquivo js é gravado na área de rodapé do site.

Aqui está o código js:

var t;
var start = $('#carouselExampleFade').find('.active').attr('data-interval');
t = setTimeout("$('#carouselExampleFade').carousel({interval: 1000});", start - 1000);

$('#carouselExampleFade').on('slid.bs.carousel', function() {
    clearTimeout(t);
    var duration = $(this).find('.active').attr('data-interval');

    $('#carouselExampleFade').carousel('pause');
    t = setTimeout("$('#carouselExampleFade').carousel();", duration - 1000);
})

$('.carousel-control-next').on('click', function() {
    clearTimeout(t);
});

$('.carousel-control-prev').on('click', function() {
    clearTimeout(t);
});

Uma parte do carrossel:

<div class="row">
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-interval="2000">
                <div class="carousel-caption d-none d-md-block text-left">
                    <h3>Willkommen im <br>Parkett!</h3>
                </div>
                <img class="d-block w-100" src="assets/img/animation/slide1.jpg" alt="First slide">
            </div>

Nota: Alterei as linhas carrossel-control-next e -prev. (Era à esquerda e à direita antes).

Alguém tem uma boa idéia para resolver este problema?

questionAnswers(1)

yourAnswerToTheQuestion