首次加载页面后，我的轮播无法正常工作。一旦它完成，我再次点击下一个/上一个箭头之一，旋转木马不会前进。我确实注意到第一次点击后URL中的轮播ID加载，如果我在那一点重新加载页面，一旦#pitchdeck轮播ID在URL中，轮播就可以正常工作。
有关为何发生这种情况的任何想法？请注意我用自定义定位的指示器，箭头和标题做了一点CSS样式，所以我不确定是否会对此进行调整。链接如下（轮播稍微向下翻页）。提前感谢您提供的任何帮助！下面的链接和代码......
<div class="container">
<div class="row">
<div id="pitchdeck" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators hidden">
<li data-target="#pitchdeck" data-slide-to="0" class="active"></li>
<li data-target="#pitchdeck" data-slide-to="1"></li>
<li data-target="#pitchdeck" data-slide-to="2"></li>
<li data-target="#pitchdeck" data-slide-to="3"></li>
<li data-target="#pitchdeck" data-slide-to="4"></li>
<li data-target="#pitchdeck" data-slide-to="5"></li>
<li data-target="#pitchdeck" data-slide-to="6"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="images/deck-stroke.jpg" alt="Stroke">
<div class="carousel-caption">
<h3><b>Stroke.</b></h3>
Nearly 800,000 people suffer from a stroke each year, making it the leading cause of serious, long-term disability in the U.S.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/deck-alz.jpg" alt="Alzheimer's">
<div class="carousel-caption">
<h3><b>Alzheimer's Disease.</b></h3>
An estimated 5.5 million Americans of all ages suffer from Alzheimer's Disease and related dementias.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="images/deck-diabetes.jpg" alt="Diabetes">
<div class="carousel-caption">
<h3><b>Diabetes.</b> </h3>
29 million people in the U.S. have diabetes and another estimated 8.1 million are undiagnosed, living unaware of their condition.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-heart.jpg" alt="Heart Disease">
<div class="carousel-caption">
<h3><b>Heart Disease.</b> </h3>
610,000 people, or one in four, die each year from heart disease in the U.S., making it the leading cause of death for Americans.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-arthritis.jpg" alt="Arthritis">
<div class="carousel-caption">
<h3><b>Arthritis.</b> </h3>
This chronic, debilitating condition afflicts 350 million people worldwide, and 40 million people in the U.S. alone.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-infertility.jpg" alt="Infertility and Erectile Dysfunction">
<div class="carousel-caption">
<h3><b>Infertility and Erectile Dysfunction.</b> </h3>
Infertility impacts 5 million people, or one in every 10 couples, in the U.S. As many as 52 percent of men suffer from erectile dysfunction.
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/wp-content/uploads/2017/12/deck-chronic.jpg" alt="Chronic Traumatic Encephalopathy">
<div class="carousel-caption">
<h3><b>Chronic Traumatic Encephalopathy.</b> </h3>
This neurodegenerative disease is found in people with multiple head injuries and afflicts NFL players, a story depicted in the feature film "Concussion" starring Will Smith. NFL players have committed suicide as a result of this disease and the NFL has set aside nearly $800 million to treat the disease.
</div>
</div>
</div>
<a class="carousel-control-prev" href="#pitchdeck" 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="#pitchdeck" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
答案 0 :(得分：1)
你的旋转木马标记是正确的，似乎这种现象与此无关。实际上，独立示例不会产生错误，因此我开始检查实时站点以查找可能会干扰此功能的其他javascripts。
显然，您在内联脚本中有一行内容如下所示。
var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');
a[href*="#"]:not([data-easing])选择器也会选择轮播控件。如果您注释掉该单行，则轮播开始按预期工作。因此，SmoothScroll javascript最有可能阻止点击事件的传播，或者以其他方式干扰点击事件。
我不熟悉SmoothScroll，但一个简单的解决方法是更改选择器不匹配轮播控件。
答案 1 :(得分：0)
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/1.jpg" alt="image1" style="width:100%;">
<div class="carousel-caption">
<h1>MARKETING</h1>
<h3>LA is always so much fun!</h3>
</div>
</div>
<div class="item">
<img src="images/2.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h1>Los Angeles</h1>
<h3>LA is always so much fun!</h3>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>