Bootstrap 4 旋转木马在第一个下一个/上一个箭头点击后不前进
Bootstrap 4 Carousel doesn't advance after the first Next / Previous arrow click
页面首次加载后，我的轮播无法正常工作。一旦它完成并且我第二次单击下一个/上一个箭头之一，轮播将不会前进。我确实注意到第一次点击后 URL 中的轮播 ID 加载，如果我在此时重新加载页面，轮播将正常工作，一旦 #pitchdeck 轮播 ID 位于 URL。
关于为什么会发生这种情况的任何想法？请注意，我对自定义定位的指示器、箭头和标题做了一些 CSS 样式设置，所以我不确定这是否适用。 Link 下方（旋转木马略低于页面）。在此先感谢您提供的任何帮助！ Link 和下面的代码...
<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 0 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>
您的轮播标记是正确的，似乎与此现象无关。事实上，独立示例不会产生错误，所以我开始检查实时站点以寻找可能干扰此功能的其他 javascripts。
显然，您在内联脚本中有一行内容如下。
var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');
a[href*="#"]:not([data-easing]) 选择器也选择轮播控件。如果您注释掉那一行，轮播将开始按预期工作。因此，SmoothScroll javascript 最有可能阻止点击事件的传播，或者以其他方式干扰该点击。
我不熟悉 SmoothScroll 但一个简单的解决方法是更改选择器以使其不匹配轮播控件。
<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>
页面首次加载后，我的轮播无法正常工作。一旦它完成并且我第二次单击下一个/上一个箭头之一，轮播将不会前进。我确实注意到第一次点击后 URL 中的轮播 ID 加载，如果我在此时重新加载页面，轮播将正常工作，一旦 #pitchdeck 轮播 ID 位于 URL。
关于为什么会发生这种情况的任何想法？请注意，我对自定义定位的指示器、箭头和标题做了一些 CSS 样式设置，所以我不确定这是否适用。 Link 下方（旋转木马略低于页面）。在此先感谢您提供的任何帮助！ Link 和下面的代码...
<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 0 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>
您的轮播标记是正确的，似乎与此现象无关。事实上，独立示例不会产生错误，所以我开始检查实时站点以寻找可能干扰此功能的其他 javascripts。
显然，您在内联脚本中有一行内容如下。
var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');
a[href*="#"]:not([data-easing]) 选择器也选择轮播控件。如果您注释掉那一行，轮播将开始按预期工作。因此，SmoothScroll javascript 最有可能阻止点击事件的传播，或者以其他方式干扰该点击。
我不熟悉 SmoothScroll 但一个简单的解决方法是更改选择器以使其不匹配轮播控件。
<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>