引导程序 4 更新后，旋转木马 slider 不起作用

Question

我正在尝试将引导程序从 3.3.4 升级到 4.1.3。 为此，我刚刚用 4.1.3 替换了 bootstrap.js 的内容。 我希望就是这样，但是，在这样做之后，slider 不起作用。 轮播出现，但图像不滑动，控件也不起作用。 我知道已经回答了类似的问题，但相信我，他们没有为我工作。 自从我一直在努力解决这个问题已经 3 天了，所以放在这里以防有人能指出我正确的方向。

jquery-v3.3.1.html

<script src='<%=Server.getApplURL()%>/../common/JS/jquery/v-3.3.1/jquery-3.3.1.min.js'></script>

现在这个文件包含在 header 文件 header.jsp

<%@include file="/../jshtml/jquery-v3.3.1.html"%>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/jquery.min.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/popper.min.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/bootstrap.js"></script>
<script src="<%=ServerSupportUtil.getApplURL() %>/kay/js/plugins.js"></script>

<!-- Scripts that run onLoad -->
<script>

$('.carousel').carousel({});
</script>

现在，这个 header 文件包含在主 jsp 页面中，该页面包含轮播代码。 我认为这足以确保 bootstrap.js、popper.js 和 jquery.js 可用于代码。 我改变了一些东西，现在两张幻灯片都是一样的。 这段代码也不起作用。

问题：

• 这个轮播不起作用，我在 Chrome 开发工具的任何地方也看不到任何错误。 关于如何查看真正错误的任何建议？

主页.jsp

<%@ include file="../common/header.jsp"%>

                <div id="carousel-main" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
                    <!-- Indicators -->
                    <ul class="carousel-indicators">
                        <%
                            while(itr.hasNext())
                            {
                                com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
                                if(sliderCounter == 0)
                                {
                          %>
                        <li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>" class="active"></li>
                        <%
                                }
                                else
                                {
                            %>
                        <li data-target="#carousel-main" data-slide-to="<%=sliderCounter %>"></li>
                        <%
                                }
                                sliderCounter++;
                            }
                            %>
                    </ul>

                    <!-- Wrapper for slides -->
                    <div class="carousel-inner">
                        <%
                          sliderCounter = 0;
                          itr = SliderDtlsList.iterator();
                          while(itr.hasNext())
                          {
                              com.SliderDetailsBn sliderbn = (com.SliderDetailsBn)itr.next();
                              String imagepath = sliderbn.getFilePath();
                              String sliderUrl = sliderbn.PathUrl();
                              String sliderType = sliderbn.getFileType();

                              DelimitedString altText = new DelimitedString( sliderbn.getAltText());
                              String actualAltText = altText.getString(1);
                              String headerAltText = altText.getString(2);

                              if(sliderCounter == 0)
                              {
                                  if("Link".equalsIgnoreCase(sliderType))
                                  {
                                  %>
                                <div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
                                    data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
                                    aria-label="<%=actualAltText%>">
                                    <div class="carousel-image"
                                        style="background-image: url('<%=imagepath%>')">
                                        <div class="carousel-caption">
                                            <h3><%=headerAltText%></h3>
                                            <p><%=actualAltText%></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="item" onclick="openWindow(this)" onKeyPress="openWindow(this)"
                                data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0"
                                aria-label="<%=actualAltText%>">
                                <div class="carousel-image"
                                    style="background-image: url('<%=imagepath%>')">
                                    <div class="carousel-caption">
                                        <h3><%=headerAltText%></h3>
                                        <p><%=actualAltText%></p>
                                    </div>
                                </div>
                        <%
                                  }
                              }

                              sliderCounter++;
                            }
                            %>
                        <!-- Controls -->
                        <a class="left carousel-control" href="#carousel-main"
                            role="button" data-slide="prev"> <span
                            class="fa-chevron-left" aria-hidden="true"></span> <span
                            class="sr-only">Previous</span>
                        </a> <a class="right carousel-control" href="#carousel-main"
                            role="button" data-slide="next"> <span
                            class="fa-chevron-right" aria-hidden="true"></span> <span
                            class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                <!-- END: Slider container -->
            </div>
        </div>
        <%
                }
                %>
        <!-- END: slider -->

Answer 1

如果您已从 BS3 更新到 BS4，那么您需要将代码中幻灯片的类从item更改为carousel-item ，因为在 BS4 中他们做了一些更改。 因此，您可以简单地对所有幻灯片 div 执行此操作

<div class="carousel-item" onclick="openWindow(this)" onKeyPress="openWindow(this)" data-href="<%=sliderUrl%>" data-interaction="true" tabindex="0" aria-label="<%=actualAltText%>">

并确保将active class 添加到轮播代码的第一张幻灯片中。

希望能帮助到你