[英]How to make Bootstrap 5 carousel dynamic (indicators & first item active class)?
I wander how to have a Bootstrap 5 carousel dynamic.我想知道如何让 Bootstrap 5 轮播动态。 I mean how to dynamically display indicators and add active class to first item of carousel.
我的意思是如何动态显示指标并将活动的 class 添加到轮播的第一项。
In Bootstrap 4 is like that:在 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>");
});
How to do that in vanilla js for bootstrap 5?如何在 vanilla js 中为 bootstrap 5 做到这一点?
thank you谢谢你
If you are looking for a simple JQuery to Vanilla JS conversion, you can use this code:如果您正在寻找一个简单的 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>";
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.