Carousel slider does not work after bootstrap 4 update with

Question

I am trying to upgrade the bootstrap from 3.3.4 to 4.1.3. To do that I have just replaced the contents of the bootstrap.js with the 4.1.3. I was hoping that this would be it, however, after doing this the slider does not work. Carousel comes up but the images do not slide and the controls also do not work. I understand that a similar question has already been answered, but trust me they have not worked for me. It's been 3 days since I have been struggling with this, so putting out here in case someone can point me in the right direction.

jquery-v3.3.1.html

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

Now this file is included in the header file 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>

Now, this header file is included in the main jsp page which has the code for the carousel. I think this is enough for making sure bootstrap.js, popper.js, and jquery.js are available to the code. I have changed few things and right now both the slides are same. This code as it is also does not work.

Question:

• This carousel does not work and I do not see any errors also anywhere in Chrome dev tools. Any suggestion on how I can see the real error?

home.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

If you have updated to BS4 from BS3 then you need to change the classes for slides in your code from item to carousel-item as in BS4 they have made few changes. So you can simply do this to all your slide divs

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

and make sure to add active class also to first slide in the carousel code.

Hope it helps