javascript 如何使Bootstrap 5旋转木马动态(指标和第一个项目活动类)？

vhmi4jdf 于 2022-12-28 发布在 Java

关注(0)|答案(1)|浏览(134)

我想知道如何有一个 Bootstrap 5旋转木马动态。我的意思是如何动态显示指标和添加活动类的第一项旋转木马。
在Bootstrap 4中是这样的：

$('#main_carousel .carousel-item:first').addClass('active');
var myCarousel = $("#main_carousel");
myCarousel.append("<ol class='carousel-indicators d-none d-xl-flex'></ol>");
var indicators = $("#main_carousel .carousel-indicators");
myCarousel.find(".carousel-inner").children(".carousel-item").each(function(index) {
  (index === 0) ?
  indicators.append("<li data-target='#main_carousel' data-slide-to='"+index+"' class='active'></li>") :
  indicators.append("<li data-target='#main_carousel' data-slide-to='"+index+"'></li>");
});

如何在bootstrap 5的vanilla js中做到这一点？
谢谢

JavaScript

来源：https://stackoverflow.com/questions/73150285/how-to-make-bootstrap-5-carousel-dynamic-indicators-first-item-active-class

1条答案

按热度按时间

uoifb46i1#

如果您正在寻找一个简单的JQuery到Vanilla JS的转换，可以使用以下代码：

document.querySelector('#main_carousel .carousel-item').classList.add('active');

let my_carousel = document.getElementById('main_carousel');
my_carousel.innerHTML += "<ol class='carousel-indicators d-none d-xl-flex'></ol>";

let indicators = document.querySelectorAll('#main_carousel .carousel-indicators');
my_carousel.querySelectorAll('.carousel-inner .carousel-item').forEach((element, index) => {
    indicators.innerHTML += index === 0 ? "<li data-target='#main_carousel' data-slide-to='" + index + "' class='active'></li>" : "<li data-target='#main_carousel' data-slide-to='" + index + "'></li>";
});

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 如何使Bootstrap 5旋转木马动态(指标和第一个项目活动类)？

1条答案

相关问题

热门标签

最新问答