JSFiddle - React, Tailwind, and code Playground

by jFIT

HTML

<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1" class=""></li>
        <li data-target="#carousel" data-slide-to="2" class=""></li>
    </ol>

    <!-- Wrapper for slides -->
    <div id="CAROUSEL_CONTENTHERE" class="carousel-inner">

        <!-- DYNAMICALLY CREATED DIVS GO HERE -->

    </div>
 </div>

JavaScript

var dynamicDiv = '<div class="item bgwhite"><div class="carousel-img-full"><a href="#"><img src="img/banner2.jpg" alt=""></a></div></div>';

$('#CAROUSEL_CONTENTHERE').append(dynamicDiv);
$('#CAROUSEL_CONTENTHERE').append(dynamicDiv);
$('#CAROUSEL_CONTENTHERE').append(dynamicDiv);

if(!$('#CAROUSEL_CONTENTHERE DIV.item.bgwhite:first').hasClass('active'))
{
    $('#CAROUSEL_CONTENTHERE DIV.item.bgwhite:first').addClass('active');
}