为什么我的上一个/下一个按钮在引导轮播上停止工作?

问题描述

我制作了一个功能齐全的旋转木马,但由于某种原因,上一个/下一个按钮停止滑动图像。相反,浏览器只是认为我点击了轮播上的任何地方,因此它会平滑滚动,直到它在页面中垂直居中。我真的把头撞在墙上玩它,并感谢任何和所有帮助。

这是代码...

HTML:

<section id="ourWork" class="container">
                <article>
                    <h2>Premier Events and World Class Projects</h2>
                    <p>White Rose Crew are commited to realising the worlds most renound public and private events,from the Olympic Games and the colossal Farnborough Airshow to NATO Summits and UN climate Conferences.<br><br>But we don't stop there. Our expertise repeatedly finds us at the forefront of inovation,filling sporting arenas with emergancy mediacal facilities to fight the Coronavirus pandemic and erecting structures at sea on the worlds largest oceanic vessle.</p>
                    <!--Put carousel here-->
                    <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>
                </article>
            </section>

JS:

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

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)