Applying Angular js ng-repeat to owl-carousel

In this article, we discuss the Applying Angular js ng-repeat to owl-carousel

Applying Angular js ng-repeat to owl-carousel

Applying Angular js ng-repeat to owl-carousel

Owl Carousel. Touch-enabled jQuery plugin that lets you create a beautiful responsive carousel slider.

In order to stop owl autoplay you can trigger the corresponding event: stopowl. autoplay: Stops autoplay.

This also says pagination (dots) can be turned off with: pagination: false, The dots: false, is for version 2. See this GitHub issue which is asking the same question.

autoPlay: 3000, //Set AutoPlay to 3 seconds.

Owl Carousel has an option to set the right pixel margin to your slider items by using options (Owl Carousel 2: Options). By using this you can keep your CSS to a minimum. margin. Type: Number. Default: 0.

To change the speed at which the sliders slide you need to apply this… … this will slow the transitions down. Change to any integrer for example autoPlay: 5000 to play every 5

HTML

<!DOCTYPE html>
<html ng-app="owl">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS owl</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.transitions.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js" />
    <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav : false}">
      <div owl-carousel-item="" ng-repeat="item in ::items1" class="item">
        <p>{{::item}}</p>
      </div>
    </data-owl-carousel>
    <data-owl-carousel class="owl-carousel" data-options="{navigation: false, pagination: true, rewindNav : false}">
      <div owl-carousel-item="" ng-repeat="item in ::items2" class="item">
        <p>{{::item}}</p>
      </div>
    </data-owl-carousel>
  </body>

</html>

app.js

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

app.controller('MainCtrl', function($scope) {
  $scope.items1 = [1,2,3,4,5];
  $scope.items2 = [1,2,3,4,5,6,7,8,9,10];
}).directive("owlCarousel", function() {
	return {
		restrict: 'E',
		transclude: false,
		link: function (scope) {
			scope.initCarousel = function(element) {
			  // provide any default options you want
				var defaultOptions = {
				};
				var customOptions = scope.$eval($(element).attr('data-options'));
				// combine the two options objects
				for(var key in customOptions) {
					defaultOptions[key] = customOptions[key];
				}
				// init carousel
				$(element).owlCarousel(defaultOptions);
			};
		}
	};
})
.directive('owlCarouselItem', [function() {
	return {
		restrict: 'A',
		transclude: false,
		link: function(scope, element) {
		  // wait for the last item in the ng-repeat then call init
			if(scope.$last) {
				scope.initCarousel(element.parent());
			}
		}
	};
}]);
Owl Carousel AngularJS directive with ng-repeat one-way data bound

Also Check out Angular Versions and Versioning

If you interested in the Entertainment genre please check this also thebiographys.com

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *