У меня есть bootstrap карусель, содержащая около 10 предметов с индикаторами. Индикаторы также можно нажимать и при нажатии можно прокручивать каждый элемент, например, к элементам применяются атрибуты data-slide-to = "1". Карусель работает, как и ожидалось, без проблем.
Теперь мне нужно удалить предметы при некоторых условиях. Когда я пытаюсь удалить из карусели элемент, который в данный момент НЕ активен, моя javascript запускается, и моя карусель все еще работает отлично.
Однако, если элемент, который я хочу удалить, в настоящее время активен, это когда карусель перестает работать после удаления элемента и индикаторов. Я понимаю, что всегда должен быть «активный» элемент, поэтому я вызываю карусель. («Следующий»), если активный элемент - тот, который нужно удалить.
Может ли кто-нибудь указать мне правильное направление относительно того, что мне нужно сделать дальше, чтобы решить эту проблему, пожалуйста. (Также, когда я удаляю элемент, мои индикаторы автоматически удаляются).
Любая помощь будет принята с благодарностью.
$('#Container').children().each(function (index, item) {
var id = item.id;
if (!eventData.evList.some(ev => ev.ev_no == id)) {
var carElement = $('.carousel').find('#' + id);
if ($(carElement).hasClass('active')) {
$('.carousel').carousel('next');
}
carElement.remove();
$('#' + id + 'ind').remove();
$('#evIndicators').children().each(function (index, item) {
$(item).attr('data-slide-to', index);
});
}
});
<div id="carouselIndicators" class="carousel slide pointer-event">
<ol id="evIndicators" class="carousel-indicators" style="margin-top: -50px; height: 50px; float: left;">
<li id="2245ind" data-target="#carouselIndicators" data-slide-to="0" class="active">22</li>
<li id="2315ind" data-target="#carouselIndicators" data-slide-to="1">23</li>
<li id="2345ind" data-target="#carouselIndicators" data-slide-to="2">24</li>
</ol>
<div id="Container" class="carousel-inner">
<div id="2245" class="carousel-item active">
<a id="22451" class="btn-link" href="#" onclick="showAddDialog(22451,8,1)">
<div class="runnerNum">1</div>
</a>
</div>
<div id="2315" class="carousel-item">
<a id="23151" class="btn-link" href="#" onclick="showAddDialog(23151,9,1)">
<div class="runnerNum">1</div>
</a>
</div>
<div id="2345" class="carousel-item">
<a id="23451" class="btn-link" href="#" onclick="showAddDialog(23451,10,1)">
<div class="runnerNum">1</div>
</a>
</div>
</div>
</div>
});
22: 45 23: 15 23: 45 1 1 1