Quiero establecer el intervalo de datos para cada diapositiva del carrusel. Aquí en stackoverflow encontré un fragmento de JavaScript para este caso, pero no funciona bien. Twitter Bootstrap Duración del tobogán carrusel) Cada diapositiva tiene su intervalo de datos establecido en línea en html con ms de 3000 a 7000 en cinco diapositivas.

La duración real de las diapositivas no se ajusta a mis expectativas y al código. Ejemplo: configuré el intervalo en 3000 y la diapositiva se muestra alrededor de 7-8 segundos.

El archivo js está escrito en el área de pie de página del sitio.

Aquí está el 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);
});

Una parte del carrusel:

<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: He cambiado las líneas carousel-control-next y -prev. (Era -izquierda y -derecha antes).

¿Alguien tiene una buena idea para resolver este problema?