为什么使我的轮播变窄会导致幻灯片之间的过渡出现故障？

如何解决为什么使我的轮播变窄会导致幻灯片之间的过渡出现故障？

我希望我的旋转木马有一定的尺寸（在我玩之前不确定是什么尺寸，但肯定不是宽度：100%）并且还希望在页面中水平居中。

我的新 CSS 规则使轮播变得更小、更集中，但现在幻灯片不会自动移动。带有“carousel-indicators”类的 ol 工作正常，因此我可以手动选择并成功移动到每张幻灯片。

同样的 CSS 似乎删除了我的下一个/上一个箭头的点击功能。更奇怪的是，当我单击下一个箭头时，页面会“平滑滚动”一点。提前致谢:)

这是代码....

HTML：

<div id="event-carousel" class="carousel slide" data-right="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#event-carousel" data-slide-to="0"></li>
                            <li data-target="#event-carousel" data-slide-to="1"></li>
                            <li data-target="#event-carousel" data-slide-to="2"></li>
                            <li data-target="#event-carousel" data-slide-to="3"></li>
                            <li data-target="#event-carousel" data-slide-to="4"></li>
                        </ol>
                        <div class="carousel-inner" roll="listBox">
                            <div class="carousel-item active">
                                <img class="d-block w-100" src="./recources/images/pioneeringSpirit.png" alt="Temporary structures built on the Pioneering Spirit catamaran">
                                <div class="carousel-caption">
                                    <h3>Pioneering Spirit</h3>
                                    <p>Weeks at sea produced thousands of square meters of temporary hospitality structures.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="./recources/images/rugbyWorldCup.png" alt="Main structure for England's Rugby World Cup.">
                                <div class="carousel-caption">
                                    <h3>Rugby World Cup</h3>
                                    <p>Twickenham is part of the White Rose Crew calander,but this year was special.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="./recources/images/thales.png" alt="A three story structure for Farnborough Airshow.">
                                <div class="carousel-caption">
                                    <h3>Thales</h3>
                                    <p>Our favourite biannual build of the worlds largest airshow.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="./recources/images/masterpiece.png" alt="Masterpiece Arts Fair,Chelsea.">
                                <div class="carousel-caption">
                                    <h3>Masterpiece</h3>
                                    <p>We are proud to be an integral part of this incredible transformation year in,year out.</p>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <img class="d-block w-100" src="./recources/images/fieldHospital.jpg" alt="Emergancy hospital built in the Pricipality Stadium.">
                                <div class="carousel-caption">
                                    <h3>Emergancy Covid-19 Field Hospital</h3>
                                    <p>Helping turn The Pricipality Stadium into Wales largest hospital in just 10 days.</p>
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#event-carousel" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                                <span class="sr-only">PrevIoUs</span>
                            </a>
                            <a class="carousel-control-next" href="#event-carousel" role="button" data-slide="next">
                                <span class="carousel-control-next-icon"></span>
                                <span class="sr-only">next</span>
                            </a>
                            
                        </div>
                    </div>

CSS：

.carousel-inner {
    margin: auto;
    width: 55%;
    height: auto;
  }

JS：

$(document).ready(() => {

    $('#event-carousel').carousel({
      interval: 8000
    });
    $('#event-carousel').carousel('cycle');

});