<div class="row wrapper border-bottom white-bg page-heading">
    <div class="col-lg-9">
        <h2>Carousel</h2>
        <ol class="breadcrumb">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                UI Elements
            </li>
            <li class="active">
                <strong>Carousel</strong>
            </li>
        </ol>
    </div>
</div>


<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-lg-5">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Animation without caption</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">
                    <uib-carousel interval="main.slideInterval">
                        <uib-slide class="active">
                            <img ng-src="img/p_big3.jpg" style="margin:auto;">
                        </uib-slide>
                        <uib-slide>
                            <img ng-src="img/p_big1.jpg" style="margin:auto;">
                        </uib-slide>
                        <uib-slide>
                            <img ng-src="img/p_big2.jpg" style="margin:auto;">
                        </uib-slide>
                    </uib-carousel>
                </div>
            </div>
        </div>
        <div class="col-lg-7">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Animation and Caption</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content ">
                    <uib-carousel interval="main.slideInterval">
                        <uib-slide class="active">
                            <img ng-src="img/p_big1.jpg" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide 1</h4>
                                <p>Simple caption 1 </p>
                            </div>
                        </uib-slide>
                        <uib-slide>
                            <img ng-src="img/p_big2.jpg" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide 2</h4>
                                <p>Simple caption 2</p>
                            </div>
                        </uib-slide>
                        <uib-slide>
                            <img ng-src="img/p_big2.jpg" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide 3</h4>
                                <p>Simple caption 3</p>
                            </div>
                        </uib-slide>
                    </uib-carousel>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>Big gallery carousel</h5>
                    <div ibox-tools></div>
                </div>
                <div class="ibox-content">

                    <uib-carousel interval="main.slideInterval">
                        <uib-slide class="active gallery">
                            <div class="row">
                                <div class="col-sm-6">
                                    <img alt="image" class="img-responsive" src="img/p_big1.jpg">
                                </div>
                                <div class="col-sm-6">
                                    <img alt="image" class="img-responsive" src="img/p_big2.jpg">
                                </div>
                                <div class="col-sm-6">
                                    <img alt="image" class="img-responsive" src="img/p_big3.jpg">
                                </div>
                                <div class="col-sm-6">
                                    <img alt="image" class="img-responsive" src="img/p_big1.jpg">
                                </div>
                            </div>
                            <div class="carousel-caption">
                                <h4>Slide 1</h4>
                                <p>Simple caption 1 </p>
                            </div>
                        </uib-slide>
                        <uib-slide>
                            <img ng-src="img/p_big1.jpg" class="img-responsive" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide 2</h4>
                                <p>Simple caption 2</p>
                            </div>
                        </uib-slide>
                        <uib-slide>
                            <img ng-src="img/p_big2.jpg" class="img-responsive" style="margin:auto;">
                            <div class="carousel-caption">
                                <h4>Slide 3</h4>
                                <p>Simple caption 3</p>
                            </div>
                        </uib-slide>
                    </uib-carousel>
                </div>
            </div>
        </div>
    </div>
</div>