BootKit home · Manual home

CAROUSEL

Bootstrap carousel can be used to display moving or fading widgets.


Available classes

Examples

1. Slide
<div class="panel bk-widget bk-bd-off bk-rd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-t-10 bk-pd-b-10 bk-ltr">
        <div class="row bk-tbl">
            <div class="col-xs-8 text-left">
                <h4 class="bk-mg-off"><i class="fa fa-bullhorn"></i> NEWS TICKER</h4>
            </div>
            <div class="col-xs-4 text-right">

                <a href="#news-ticker" role="button" data-slide="next" class="bk-custom-ctrl pull-right">
                    <i class="fa fa-angle-right"></i>
                </a>

                <a href="#news-ticker" role="button" data-slide="prev" class="bk-custom-ctrl pull-right bk-mg-r-5">
                    <i class="fa fa-angle-left"></i>
                </a>
            </div>
        </div>
    </div>

    <hr class="bk-mg-off">

    <div id="news-ticker" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-info">
                            <i class="fa fa-send-o fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-info bk-fg-darken bk-mg-off-b"><strong>OCTOBER NEWSLETTER</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>Click here to read the latest developments in our company.</small>
                    </p>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-warning">
                            <i class="fa fa-gift fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-warning bk-fg-darken bk-mg-off-b"><strong>APP UPDATE</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>New information pertaining Project X-ray that might interest you.</small>
                    </p>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-success">
                            <i class="fa fa-map-marker fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-success bk-fg-darken bk-mg-off-b"><strong>WHERE YOU AT?</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>Some interesting locations and pictures have been added.</small>
                    </p>
                </a>
            </div>
        </div>
    </div>
</div>
2. Fade (IE10 and higher)
<div class="panel bk-widget bk-bd-off bk-rd-off">
    <div class="panel-body bk-bg-white text-center bk-pd-t-10 bk-pd-b-10 bk-ltr">
        <div class="row bk-tbl">

            <div class="col-xs-4 text-left">

                <a href="#projects" role="button" data-slide="prev" class="bk-custom-ctrl pull-left bk-mg-r-5">
                    <i class="fa fa-angle-left"></i>
                </a>

                <a href="#projects" role="button" data-slide="next" class="bk-custom-ctrl pull-left">
                    <i class="fa fa-angle-right"></i>
                </a>

            </div>
            <div class="col-xs-8 text-right">
                <h4 class="bk-mg-off"><i class="fa fa-code-fork"></i> PROJECTS</h4>
            </div>
        </div>
    </div>

    <hr class="bk-mg-off">

    <div id="projects" class="carousel bk-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-info">
                            <i class="fa fa-send-o fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-info bk-fg-darken bk-mg-off-b"><strong>OCTOBER NEWSLETTER</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>Click here to read the latest developments in our company.</small>
                    </p>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-warning">
                            <i class="fa fa-gift fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-warning bk-fg-darken bk-mg-off-b"><strong>APP UPDATE</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>New information pertaining Project X-ray that might interest you.</small>
                    </p>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-success">
                            <i class="fa fa-map-marker fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-success bk-fg-darken bk-mg-off-b"><strong>WHERE YOU AT?</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>Some interesting locations and pictures have been added.</small>
                    </p>
                </a>
            </div>
        </div>
    </div>
</div>
3. Inner controls (hovering over content shows controls)
<div class="panel bk-widget bk-bd-off bk-chrome-fix">
    <div class="panel-body bk-bg-white text-center bk-pd-t-10 bk-pd-b-10 bk-ltr">
        <div class="row bk-tbl">
            <div class="col-xs-8 text-left">
                <h5 class="bk-mg-off"><em>From the workfloor</em></h5>
            </div>
            <div class="col-xs-4 text-right">
                <i class="fa fa-comment-o fa-2x"></i>
            </div>
        </div>
    </div>

    <hr class="bk-mg-off">

    <div id="workfloor" class="carousel bk-fade" data-ride="carousel">

        <div class="carousel-inner">
            <div class="item active">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-info">
                            <i class="fa fa-send-o fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-info bk-fg-darken bk-mg-off-b"><strong>OCTOBER NEWSLETTER</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>Click here to read the latest developments in our company.</small>
                    </p>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-warning">
                            <i class="fa fa-gift fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-warning bk-fg-darken bk-mg-off-b"><strong>APP UPDATE</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>New information pertaining Project X-ray that might interest you.</small>
                    </p>
                </a>
            </div>
            <div class="item">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-pd-off-t">
                    <div class="pull-left bk-mg-t-10 bk-mg-r-10">
                        <div class="bk-round bk-bg-darken bk-bd-off bk-icon bk-icon-2x bk-icon-default bk-bg-success">
                            <i class="fa fa-map-marker fa-2x bk-fg-white"></i>
                        </div>
                    </div>
                    <h5 class="bk-fg-success bk-fg-darken bk-mg-off-b"><strong>WHERE YOU AT?</strong></h5>
                    <p class="bk-fg-textcolor bk-mg-off-b">
                        <small>Some interesting locations and pictures have been added.</small>
                    </p>
                </a>
            </div>
        </div>
        <a class="left carousel-control bk-carousel-ctrl bk-carousel-hide-init" href="#workfloor" role="button" data-slide="prev">
            <span class="fa fa-angle-left icon-prev"></span>
        </a>
        <a class="right carousel-control bk-carousel-ctrl bk-carousel-hide-init" href="#workfloor" role="button" data-slide="next">
            <span class="fa fa-angle-right icon-next"></span>
        </a>
    </div>

</div>
4. Navigation below

Uses bk-chrome-fix to push through rounded corners on the widget (bugfix in chrome).

<div class="panel bk-widget bk-bd-off bk-chrome-fix">

    <div id="countries" class="carousel bk-fade" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> BRUSSELS <small>(GMT +1)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-primary text-center">
                    Brussels content here
                </a>
            </div>
            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> NEW YORK <small>(EST)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-primary text-center">
                    New York content here
                </a>
            </div>
            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> MELBOURNE <small>(AEST)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-primary text-center">
                    Melbourne content here
                </a>
            </div>
            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> TOKYO <small>(JST)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-primary text-center">
                    Tokyo content here
                </a>
            </div>
            <div class="item">
                <div class="panel-body bk-bg-white">
                    <h4 class="bk-mg-off"><i class="fa fa-map-marker"></i> LOS ANGELES <small>(PDT)</small></h4>
                </div>
                <hr class="bk-mg-off">
                <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-fg-primary text-center">
                    Los angeles content here
                </a>
            </div>
        </div>
    </div>

    <hr class="bk-mg-off">

    <div class="panel-body bk-pd-off">
        <div class="row">
            <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="prev">
                <small><i class="fa fa-angle-left"></i> PREVIOUS</small>
            </a>
            <a href="#countries" class="col-xs-6 pull-left bk-bg-white bk-bg-darken bk-fg-textcolor bk-pd-t-10 bk-pd-b-10 text-center" data-slide="next">
                <small>NEXT <i class="fa fa-angle-right"></i></small>
            </a>
        </div>
    </div>
</div>