
 

    

    <div id="custom" class="carousel slide carousel-animations" data-interval="8000" data-ride="carousel" itemscope itemtype="http://schema.org/ItemList">

        <ol class="carousel-indicators">

            <li data-target="#custom" data-slide-to="0" class="active"></li>

            <li data-target="#custom" data-slide-to="1"></li>

            <li data-target="#custom" data-slide-to="2"></li>

            <li data-target="#custom" data-slide-to="3"></li>

            <li data-target="#custom" data-slide-to="4"></li>

            <li data-target="#custom" data-slide-to="5"></li>

            <li data-target="#custom" data-slide-to="6"></li>

        </ol>

        <div class="carousel-inner">

            <div class="carousel-item active">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">One</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></p>

                </div>

            </div>

            <div class="carousel-item">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">Two</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Maecenas dictum gravida semper.</a></p>

                </div>

            </div>

            <div class="carousel-item">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">Tree</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Phasellus vitae nulla quis ligula rutrum lacinia quis vitae dui. </a></p>

                </div>

            </div>

            <div class="carousel-item">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">Four</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Donec porttitor metus sit amet faucibus ullamcorper.</a></p>

                </div>

            </div>

            <div class="carousel-item">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">Five</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Donec ullamcorper sed tortor nec ultrices.</a></p>

                </div>

            </div>

            <div class="carousel-item">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">Six</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Etiam elementum luctus sem in gravida.</a></p>

                </div>

            </div>

            <div class="carousel-item">

                <a href="#" itemprop="url"><img class="d-block w-100" src="http://placehold.it/960x370" alt=""></a>

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

                    <h5 itemprop="name"><a href="#" itemprop="url" data-animation="animated fadeInLeft">Seven</a></h5>

                    <p itemprop="itemListElement"><a href="#" itemprop="url" data-animation="animated bounceInLeft">Sed venenatis id arcu bibendum bibendum. </a></p>

                </div>

            </div>

        </div>

        <a class="carousel-control-prev" href="#custom" 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="#custom" role="button" data-slide="next">

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

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

        </a>

    </div>