JSFiddle - React, Tailwind, and code Playground

owl ng-repeat

by Andrew Pougher

HTML

<script src="//code.jquery.com/jquery-2.1.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.js"></script>
<div ng-app="App" ng-controller='drewCtrl' class="container">
  <script type='text/ng-template' id='andrewp.html'>

    <div class="owl-carousel owl-theme galleries">
      <div owlme ng-repeat="im in gallery"> <img ng-src="{{im.img}}"></div>
    </div>

  </script>
  <div andyp>...loading</div>
</div>

CSS

.owl-theme .owl-controls {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-controls .owl-nav [class *=owl-] {
  color: #fff;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #d6d6d6;
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.owl-theme .owl-controls .owl-nav [class *=owl-]:hover {
  background: #869791;
  color: #fff;
  text-decoration: none
}

.owl-theme .owl-controls .owl-nav .disabled {
  opacity: .5;
  cursor: default
}

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  * display: inline
}

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
  background: #d6d6d6;
  display: block;
  -webkit-backface-visibility: visible;
  -webkit-transition: opacity 200ms ease;
  -moz-transition: opacity 200ms ease;
  -ms-transition: opacity 200ms ease;
  -o-transition: opacity 200ms ease;
  transition: opacity 200ms ease;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
  background: #869791
}

.owl-theme .owl-controls {
  margin-top: 10px;
  text-align: center;
  -webkit-tap-highlight-color: transparent
}

.owl-theme .owl-controls .owl-nav [class*=owl-] {
  color: #fff;
  font-size: 14px;
  margin: 5px;
  padding: 4px 7px;
  background: #d6d6d6;
  display: inline-block;
  cursor: pointer;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

.owl-theme .owl-controls .owl-nav [class*=owl-]:hover {
  background: #869791;
  color: #fff;
  text-decoration: none
}

.owl-theme .owl-controls .owl-nav .disabled {
  opacity: .5;
  cursor: default
}

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
  zoom: 1;
  *display: inline
}

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 5px 7px;
 ...

JavaScript

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


App.directive('andyp', function($http, $timeout) {
  return {
    restrict: 'A',
     transclude: false,
    templateUrl: 'andrewp.html',
    link: function(scope, element, attrs) {
      scope.gallery = [{
        "img": "http://placehold.it/210/535454/ffffff/"
      }, {
        "img": "http://placehold.it/210/ece343/ffffff/"
      }, {
        "img": "http://placehold.it/210/343233/ffffff/"
      }, {
        "img": "http://placehold.it/210/3de432/ffffff/"
      }, {
        "img": "http://placehold.it/210/343233/ffffff/"
      }, {
        "img": "http://placehold.it/210/867564/ffffff/"

      }];

      /*        $http.get('https://api.github.com/repos/angular/angular.js').success(function(data) {
                scope.data = data;
});*/

    }
  };
});


App.directive('owlme', ['$timeout', function ($timeout) {
    return {
     restrict: 'AE',
     transclude: false,
     //templateUrl: '/mine/layoutgallery.html',
     link: function (scope, el, attrs) {
     scope.$watch('$last', function (n, o) {
    if (n) { $timeout(function () { 
      initOwl();
  });
                }
            });
        }
    };
}]);


App.controller('drewCtrl', function($scope, $timeout, $http, $window) {
/*
  $scope.gallery =[{
    "img": "http://placehold.it/310/535454/ffffff/"
  }, {
    "img": "http://placehold.it/310/ece343/ffffff/"
  }, {
    "img": "http://placehold.it/310/343233/ffffff/"
  }, {
    "img": "http://placehold.it/310/3de432/ffffff/"
  }, {
    "img": "http://placehold.it/310/343233/ffffff/"
  }, {
    "img": "http://placehold.it/310/867564/ffffff/"

  }];
*/


});





function initOwl() {
  $(".galleries").owlCarousel({
    autoplay: true,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    nav: true,
    margin: 10,
    responsiveClass: true,
    responsive: {
      0: {
        items: 1,
        nav: true,
               loop: true
      },
      600: {
        items: 3,
        nav: true,
              ...