Bootstrap Carousel

<div id="-plugin-{UNIQUE_ID}">

    <div id="carousel-outer-{UNIQUE_ID}" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">

            {SLIDE_NAV}

        </ol>

        <div class="carousel-inner">

            {SLIDES}

        </div>

        <a class="carousel-control-prev" href="#carousel-outer-{UNIQUE_ID}" role="button" data-slide="prev">

            <span class="carousel-control-prev-icon" aria-hidden="true"></span>

            <span class="sr-only">Previous</span>

        </a>

        <a class="carousel-control-next" href="#carousel-outer-{UNIQUE_ID}" role="button" data-slide="next">

            <span class="carousel-control-next-icon" aria-hidden="true"></span>

            <span class="sr-only">Next</span>

        </a>

    </div>

</div>

<div class="carousel-item">

    <img class="d-block w-100" src="{IMAGE=image|size:sm}" alt="{ALT_TEXT=text}">

    <div class="carousel-caption d-none d-md-block">

        <!-- DOESN'T HAVE TO BE h5 -->

        <h5>{CAPTION_HEADER=text}</h5>

        <p>{CAPTION_TEXT=textarea}</p>

    </div>

</div>

​

<li data-target="#carousel-outer-{UNIQUE_ID}" data-slide-to="{SLIDE_INDEX}"></li>

$("#-plugin-{UNIQUE_ID} .carousel-inner").find(".carousel-item").first().addClass("active");

​

$('.carousel').carousel({

  interval: 2000

});

.-lei-edit {

    .carousel-item {

        display:block;

    }

}