JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div startslider></div>

JavaScript

var app = angular.module('myApp', []);

app.directive('startslider',function() {
    return {
       restrict: 'A',
       replace: true,
       template: '<ul class="bxslider">' +
                   '<li ng-repeat="picture in pictures">' +
                     '<img ng-src="{{picture.src}}" alt="" />' +
                   '</li>' +
                  '</ul>',
       link: function(scope, elm, attrs) {
          elm.ready(function() {    
               $("." + $(elm[0]).attr('class')).bxSlider({
                    mode: 'fade',
                    autoControls: true,
                    slideWidth: 360,
                    slideHeight:600
            });

          });
      }
    };
});

app.controller('MainCtrl', function($scope) {
  $scope.base = 'http://bxslider.com';
  $scope.pictures = [
       {src: $scope.base + '/images/730_200/hill_fence.jpg' },
       {src: $scope.base + '/images/730_100/tree_root.jpg' },
       {src: $scope.base + '/images/730_150/me_trees.jpg' }
     ];
});