如何在2次循环后停止Bootstrap Image Carousel？

Question

在我的Angular 5组件中，我使用了bootstrap 3轮播。如何在2个持续时间后停止旋转木马的循环？

<div class="row">
    <div class="col-md-12">
        <div id="carousel-example-generic" class="carousel slide" data-interval="2500" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <img src="http://placehold.it/1200x500/3498db/2980b9" alt="First slide">
                    <div class="carousel-caption">
                        <h3>
                            First slide</h3>
                        <p>
                            Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
                    <div class="carousel-caption">
                        <h3>
                            Second slide</h3>
                        <p>
                            Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
                <div class="item">
                    <img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
                    <div class="carousel-caption">
                        <h3>
                            Third slide</h3>
                        <p>
                            Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </div>
                </div>
            </div>
            <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control"
                    href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
                    </span></a>
        </div>
        <div class="main-text hidden-xs">
            <div class="col-md-12 text-center">
                <h1>
                    Static Headline And Content</h1>
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </h3>
                <div class="">
            </div>
        </div>
    </div>
</div>

我之前只看过jquery解决方案，我在组件文件中尝试了以下内容：

 ngOnInit() {
    $('.carousel').carousel({
      interval: 15000,
      wrap: false
    });

有什么建议吗？我很乐意找到一个不涉及jquery的解决方案。