Невозможно запустить карусель разных предметов, используя в Boostrap 3.3.7 в угловом производстве

Question

здесь я использую bootstrap 3.3.7 и angular 6 для создания карусели, состоящей из нескольких элементов, моя проблема заключается в следующем: 1. При нажатии next & prev моя карусель, состоящая из нескольких элементов, перемещается, но при нажатии next она накладывается / накладывается друг на друга иэто карусель работает локально, но в ng bulild --prod в рабочей версии она не работает

Ниже приведено визуальное представление моей проблемы https://youtu.be/7cjbHgTsVjc

ниже мой код

.html code

<div class="container">
    <div class="row">
        <div class="col-xs-12" id="datacase">
            <h2 class="h">Test Data</h2>


            <div id="imageCarousel" class="carousel slide" data-interval="2000" data-ride="carousel" data-pause="hover" data-wrap="true">

                <div class="carousel-inner">
                    <div class="item active">
                        <div class="row">
                            <div class="col-lg-4">


                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=A" alt="Card image cap">
                                    <h5>A CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> A Content

                                    </p>


                                </div>

                            </div>
                            <div class="col-lg-4">

                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=B" alt="Card image cap">
                                    <h5>B CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> B Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=C" alt="Card image cap">
                                    <h5>C CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> C Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=D" alt="Card image cap">
                                    <h5>D CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> D Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=E" alt="Card image cap">
                                    <h5>E CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> E Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=F" alt="Card image cap">
                                    <h5>F CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs">F Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="item">
                        <div class="row">
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=G" alt="Card image cap">
                                    <h5>g CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> g Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=H" alt="Card image cap">
                                    <h5>H CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs"> H Content

                                    </p>


                                </div>
                            </div>
                            <div class="col-lg-4">
                                <div class="custom-box">
                                    <img src="http://www.placehold.it/300x300&text=I" alt="Card image cap">
                                    <h5>I CONTENT</h5>
                                    <p style="text-align: justify;padding:12px" class="cs">I Content

                                    </p>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="#imageCarousel" class="carousel-control left" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#imageCarousel" class="carousel-control right" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>





            </div>

        </div>
.scss code

.carousel-control.left {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
    background-repeat: repeat-x;
    left: -169px;
}

.carousel-control.right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 100%);
    background-repeat: repeat-x;
    right: -169px;
}

.glyphicon-chevron-left:before {
    color: black;
}

.glyphicon-chevron-right:before {
    color: black;
}



.custom-box {
    background: #FFFFFF;
    border: 1px solid #DCDBD7;
    margin: 30px 0;

    padding: 0px -1px 35px;
    text-align: center;
    min-height: 35rem;
}

.custom-box img {
    width: 100%;
    height: 15vw;
}

.custom-box h5 {
       font-size: 20px;
    color: #2D373C;
    letter-spacing: 0;
    line-height: 20px;
}

.cs {

    color: #2D373C;
    letter-spacing: 0;
    line-height: 20px;
}

ниже мой стек блиц-URL

https://stackblitz.com/edit/angular-f2hx6b

Примечание: поскольку стек-блиц не поддерживает должным образом угловой с jquery, так что только кодтам для справки о проблеме, пожалуйста, проверьте видео