# TODO: Add Usage form http://v4-alpha.getbootstrap.com/components/carousel/#usage

# Carousel
# Carousel - Bootstrap 4
snippet caro
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#${3:carousel-example-generic}" data-slide-to="${4:0}" class="active"></li>
        <li data-target="#${3:carousel-example-generic}" data-slide-to="${4:1}"></li>
        <li data-target="#${3:carousel-example-generic}" data-slide-to="${4:2}"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="carousel-item active">
            <img data-src="${1:holder.js/900x500/auto/#777:#555/text:First slide}" alt="${2:First slide}">
        </div>
        <div class="carousel-item">
            <img data-src="${1:holder.js/900x500/auto/#666:#444/text:Second slide}" alt="${2:Second slide}">
        </div>
        <div class="carousel-item">
            <img data-src="${1:holder.js/900x500/auto/#555:#333/text:Third slide}" alt="${2:Third slide}">
        </div>
    </div>
    <a class="left carousel-control" href="#${5:carousel-example-generic}" role="button" data-slide="prev">
        <span class="icon-prev" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#${5:carousel-example-generic}" role="button" data-slide="next">
        <span class="icon-next" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
endsnippet

# Carousel caption - Bootstrap 4
snippet caroca
<div class="carousel-item">
    <img src="${1:...}" alt="${2:...}">
    <div class="carousel-caption">
        <h3>${3:...}</h3>
        <p>${4:...}</p>
    </div>
</div>
endsnippet