DNN Liquid Content – Getting the first item in a visualizer

Sometimes, for example when working with a Bootstrap carousel, you need to know when you’re on the first item in the visualizer. Liquid Content apparently can’t do this natively (yet) so you’ll need to do this with Javascript.

To add the active class to the first item in a Bootstrap carousel, I put the following code into the script section of the visualizer. You should be able to adapt it to suit your needs:

var items = document.querySelectorAll(".carousel");
if (items.length) {
items.querySelector(".carousel-item:first-child").classList.add("active");
}

I raised this as an enhancement request with DNN Software, as DNN-26912.