carousel

by nayanakalkur

HTML

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<div id="teaser-image-carousel" class="margin-top-30 margin-bottom-60">
        <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel ng-isolate-scope" ng-swipe-right="prev()" ng-swipe-left="next()" interval="vm.myInterval">
    <ol class="carousel-indicators" ng-show="slides.length > 1">
        <!-- ngRepeat: slide in slides track by $index --><li ng-repeat="slide in slides track by $index" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope active"></li><!-- end ngRepeat: slide in slides track by $index --><li ng-repeat="slide in slides track by $index" ng-class="{active: isActive(slide)}" ng-click="select(slide)" class="ng-scope"></li><!-- end ngRepeat: slide in slides track by $index -->
    </ol>
    <div class="carousel-inner" ng-transclude="">
            <!-- ngRepeat: slide in vm.slides --><div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next': (next || active) &amp;&amp; direction=='next',
    'right': direction=='prev',
    'left': direction=='next'
  }" class="item text-center ng-isolate-scope active" ng-transclude="" ng-repeat="slide in vm.slides" active="slide.active">
                <div class="carousel-height ng-scope">
                    <img class="carousel-image-size" ng-src="http://placehold.it/300x200/888&text=Item 1" src="http://placehold.it/300x200/aaa&text=Item 2">
                </div>
            </div><!-- end ngRepeat: slide in vm.slides --><div ng-class="{
    'active': leaving || (active &amp;&amp; !entering),
    'prev': (next || active) &amp;&amp; direction=='prev',
    'next':...

CSS

/* setting width:height according to aspect ratio */
.carousel-image-size {
    display: block;
    width: 100% !important;
    height: auto !important;
}
.carousel-height {
    display: block;
    width: 50%;
    height: 58.33%;
    position: relative;
    overflow: hidden;
    padding:0 0 41.67% 0;
}
.carousel-image-size {
    display: block;
    width: 100% !important;
    height: auto !important;
}

/*#teaser-image-carousel span.gyyphicon.glyphicon-chevron-left,
#teaser-image-carousel span.gyyphicon.glyphicon-chevron-right {
    top: 43.5% !important;
}


#teaser-image-carousel ol.carousel-indicators li.ng-scope {
    margin: 1px 5px 1px 5px;
    border: none;
    background-color: #EEEEEE;
}*/

  /*  #teaser-image-carousel ol.carousel-indicators li.ng-scope.active {
        border: none;
        margin: 1px 5px 1px 5px;
        background-color: black;
        width: 10px;
        height: 10px;
    }*/

/*#teaser-image-carousel ol.carousel-indicators {
    bottom: -50px !important;
}


#teaser-image-carousel .carousel-control.left, #teaser-image-carousel .carousel-control.right {
    background-image: none !important;
}


#teaser-image-carousel a.left.carousel-control, #teaser-image-carousel a.right.carousel-control {
    width: 5% !important;
    opacity: 1 !important;
}*/

JavaScript

function TodoCtrl($scope) {
 $scope.slides = [
                {
                    image: 'http://placehold.it/300x200/888&text=Item 1'
                },
                {
                    image: 'http://placehold.it/300x200/aaa&text=Item 2'
                }
            ];
            $scope.myInterval = 3000;

}