Welcome to Help center

We are here to help

Bootstrap carousel

Follow

Carousel with carousel-controls

carousel-controls.png

HTML:

        <div id="myCarousel" class="carousel slide">

        <!-- Wrapper for slides -->
            <div class="carousel-inner">
                <div class="active item ">
                    <div class="gallery_1"></div>
                </div>
                <div class="item ">
                    <div class="gallery_2"></div>
                </div>
                <div class="item ">
                    <div class="gallery_3"></div>
                </div>
            </div>

        <!-- Left and right controls -->
            <a class="carousel-control right-top" href="#myCarousel" data-slide="prev">
                <i class="icon-left-open-mini" aria-hidden="true"></i>
            </a>
            <a class="carousel-control right-bottom" href="#myCarousel" data-slide="next">
                <i class="icon-right-open-mini" aria-hidden="true"></i>
            </a>
        </div>
    

 

carousel-indicators.jpg

HTML:

        <div id="home-carousel" class="carousel" data-ride="carousel">

        <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active slide_1 "> ... </div>
                <div class="item slide_2 "> ... </div>
                <div class="item slide_3 "> ... </div>
            </div>

        <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#home-carousel" data-slide-to="0" class="active"></li>
                <li class="two" data-target="#home-carousel" data-slide-to="1"></li>
                <li data-target="#home-carousel" data-slide-to="2"></li>
            </ol>
        </div>
Top
Powered by Zendesk