JSFiddle - React, Tailwind, and code Playground

by nayanakalkur

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<div ng-app="app">
  <div ng-controller="CarouselDemoCtrl" id="slides_control">
    <div>
      <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.image}}">
          <div class="carousel-caption">
            <h4>Slide {{$index+1}}</h4>
          </div>
        </slide>
      </carousel>
    </div>
  </div>
</div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>

CSS

#slides_control > div{
  height: 200px;
}
img{
  margin:auto;
  width: 400px;
}
#slides_control {
  position:absolute;
  width: 400px;
  left:50%;
  top:20px;
 margin-left:-200px;
}

JavaScript

angular.module('app', ['ui.bootstrap']);
function CarouselDemoCtrl($scope){
  $scope.myInterval = 3000;
  $scope.slides = [
    {
      image: 'http://lorempixel.com/400/200/'
    },
    {
      image: 'http://lorempixel.com/400/200/food'
    },
    {
      image: 'http://lorempixel.com/400/200/sports'
    },
    {
      image: 'http://lorempixel.com/400/200/people'
    }
  ];
}