JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<div ng-app="capp" ng-controller="carouselCtrl" id="demo" class="carousel slide" data-ride="carousel">
  <h3>{{stuff}}</h3>
  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" ng-repeat="item in items" data-slide-to="{{$index + 1}}" ng-class="{'active': $first}"></li>
  </ul>
  
  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item" ng-class="{'active': $first}" ng-repeat="item in items">
      <img ng-src="{{item}}" width="500" height="300">
    </div>
  </div>
  
  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>

JavaScript

const app = angular.module('capp', []);
app.controller('carouselCtrl', function($scope, $timeout) {
	$scope.items = [
  	'https://picsum.photos/500/300/?1',
    'https://picsum.photos/500/300/?2',
    'https://picsum.photos/500/300/?3'
  ];
  
  $timeout(() => $scope.items.push('https://picsum.photos/500/300/?4'), 5000);
  $timeout(() => $scope.items.pop(), 10000);
});