Bootstrap 4多图像轮播（5张图片，而不是4张图片）

Question

我已经在此网站https://www.codeply.com/go/3EQkUOhhZz上实现了轮播功能

但是，该站点一次只能显示4张图像。我需要一次显示5张图像的帮助，之后再一次显示一张图像。

我尝试更改javacript，并能够显示5张图像。但是，当它显示时，它会像正在重新加载图像一样出现故障（因此看起来好像出现了2组，瞬间）

HTML

nil

JavaScript

 <div class="row mx-auto my-auto">
        <div id="recipeCarousel" class="carousel slide w-100" data-ride="carousel">
            <div class="carousel-inner w-100" role="listbox">
                <div class="carousel-item active">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=1">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=2">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=3">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=4">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=5">
                </div>
                <div class="carousel-item">
                    <img class="d-block col-2 img-fluid" src="http://placehold.it/350x180?text=6">
                </div>
            </div>
            <a class="carousel-control-prev" href="#recipeCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#recipeCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>