users-articles v1.8

app/app.module.js

@@ -1,4 +1,5 @@
-var app = angular.module('GuideApp', ['ngRoute', 'ui.bootstrap', 'uiGmapgoogle-maps', 'nemLogging', 'ngAnimate', 'ngTouch'])
+var app = angular.module('GuideApp', ['ngRoute', 'ui.bootstrap', 'uiGmapgoogle-maps', 
+	'nemLogging', 'ngAnimate', 'ngTouch', 'bzSlider'])
 .config(
     ['uiGmapGoogleMapApiProvider', function(GoogleMapApiProviders) {
         GoogleMapApiProviders.configure({

app/controllers/article-details.controller.js

@@ -1,4 +1,4 @@
-app.controller('ArticleDetails', ['$scope', '$routeParams', 'articles.repository', 
+app.controller('ArticleDetails', ['$scope', '$routeParams', 'articles.repository',
 	function($scope, $routeParams, articlesRepository) {
 	var articleId = $routeParams.id,
 		articleModel = {};
@@ -8,4 +8,16 @@ app.controller('ArticleDetails', ['$scope', '$routeParams', 'articles.repository
 		$scope.article.date = new Date($scope.article.date);
 	}, function(error) {});
 
+
+$scope.delay = 4000;
+
+	$scope.slides = [
+        { 'image': 'image/users-photos/0001.jpg' },
+        { 'image': 'image/users-photos/0002.jpg' },
+        { 'image': 'image/users-photos/0003.jpg' },
+        { 'image': 'image/users-photos/0004.jpg' }
+       ];
+
 }]);
+
+// https://github.com/esvit/bz-slider/blob/master/examples/demo1.html

bz-slider/bz-slider.src.js

@@ -0,0 +1,87 @@
+(function(angular, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define('bzSlider', ['angular'], function($, angular) {
+            return factory(angular);
+        });
+    } else {
+        return factory(angular);
+    }
+}(angular || null, function(angular) {
+var app = angular.module('bzSlider', []);
+var bzSliderController = ['$scope', '$timeout', '$parse', function ($scope, $timeout, $parse) {
+    var timeOut = null;
+
+    $scope.$slides = $scope.$slides || [];
+    $scope.$play = false;
+
+    $scope.play = function() {
+        timeOut = $timeout(function() {
+            $scope.next();
+            $scope.play();
+        }, $scope.$delay || 2000);
+        $scope.$play = true;
+    };
+
+    $scope.stop = function() {
+        $timeout.cancel(timeOut);
+        timeOut = null;
+        $scope.$play = false;
+    };
+
+    $scope.next = function() {
+        var total = $scope.$slides.length;
+        if (total > 0) {
+            $scope.$slideIndex = ($scope.$slideIndex == total - 1) ? 0 : $scope.$slideIndex + 1;
+        }
+    };
+
+    $scope.prev = function() {
+        var total = $scope.$slides.length;
+        if (total > 0) {
+            $scope.$slideIndex = ($scope.$slideIndex == 0) ? total - 1 : $scope.$slideIndex - 1;
+        }
+    };
+
+    $scope.setIndex = function(index) {
+        $scope.$slideIndex = index;
+    };
+}];
+app.directive('bzSlider', ['$timeout', '$parse', function ($timeout, $parse) {
+    return {
+        restrict: 'AC',
+        replace: false,
+        scope: true,
+        controller: bzSliderController,
+        link: function(scope, element, attrs) {
+            element.addClass('bz-slider');
+            scope.$slideIndex = 0;
+            scope.$slides = [];
+
+            // watch for slides update
+            scope.$watch(attrs.bzSlider, function(value) {
+                var arr = [];
+                angular.forEach(element.children(), function(item) {
+                    if (angular.element(item).hasClass('bz-slide')) {
+                        arr.push(item);
+                    }
+                });
+                scope.$slides = arr;
+            });
+            // delay
+            if (angular.isDefined(attrs.delay)) {
+                scope.$watch(attrs.delay, function(value) {
+                    scope.$delay = value;
+                });
+            }
+            // autoplay
+            if (angular.isDefined(attrs.autoplay)) {
+                scope.$autoplay = $parse(attrs.autoplay)(scope);
+                if (scope.$autoplay) {
+                    scope.play();
+                }
+            }
+        }
+    };
+}]);
+    return app;
+}));

css/style.css

@@ -442,7 +442,7 @@ nav button {
     margin-top: 50px;
 }
 
-.title {
+.col-xs-12.title {
     border-top: 1px solid blue;
 }
 
@@ -465,7 +465,8 @@ nav button {
 }
 
 .block-count {
-    padding-top: 120px;
+    padding-top: 60px;
+    padding-right: 50px;
 }
 
 fieldset {
@@ -504,4 +505,28 @@ fieldset p {
 
 .user-info {
     margin: 25px;
-}
+}
+
+.famous {
+    margin-top: 20px;
+}
+
+/*Слайдер к фото*/
+.bz-slider {
+    height: 460px;
+    overflow: hidden;
+    margin: 15px;
+    margin-bottom: 30px; 
+    }
+            
+.bz-slide {
+     height: 420px;
+    }
+
+.controls {
+    position: absolute;
+    bottom: 0;
+    left: 35%;
+    padding: 15px;
+    z-index: 2;
+    }

index.html

@@ -6,6 +6,8 @@
     <title>Document</title>
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="./css/style.css">
+    <link rel="stylesheet" href="./bz-slider/animate.css">
+    <link rel="stylesheet" href="./bz-slider/bz-slider.css">
     <link rel='stylesheet' type="text/css" href="./css/styleGlobalMap.css">
     <link type="text/css" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" rel="stylesheet">
 </head>
@@ -26,6 +28,7 @@
 
     <script type="text/javascript" src="./node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
     <script type="text/javascript" src="./node_modules/sortablejs/Sortable.js"></script>
+    <script src="./bz-slider/bz-slider.src.js"></script>
 
     <script type="text/javascript" src="app/app.module.js"></script>
     <script type="text/javascript" src="app/app.routes.js"></script>