Я пытаюсь обновить bootstrap с 3.3.4 до 4.1.3. Для этого я просто заменил содержимое bootstrap. js на 4.1.3. Я надеялся, что так оно и будет, однако после этого ползунок не работает. Появляется карусель, но изображения не скользят, и элементы управления также не работают. Я понимаю, что на аналогичный вопрос уже был дан ответ, но, поверьте, они у меня не сработали. Прошло 3 дня с тех пор, как я боролся с этим, поэтому выложу здесь на случай, если кто-то может указать мне правильное направление.
jquery -v3.3.1. html
<script src='<%=Server.getApplURL()%>/../common/JS/jquery/v-3.3.1/jquery-3.3.1.min.js'></script>
Теперь этот файл включен в заголовок файла заголовка. 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>
Теперь этот файл заголовка включен в основную jsp страницу, на которой есть код для карусели. Я думаю, что этого достаточно, чтобы убедиться, что bootstrap. js, popper. js и jquery. js доступны для кода. Я изменил несколько вещей, и сейчас оба слайда одинаковые. Этот код, как он есть, также не работает.
Вопрос:
- Эта карусель не работает, и я не вижу никаких ошибок в инструментах Chrome dev. Есть предложения, как увидеть настоящую ошибку?
домой. 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 -->