Добрый день подскажите как разместить 2 слайдера на 1 странице с разными данными.
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script><script src='https://chrisbateman.github.io/impetus/impetus.min.js'></script><script>
(function(angular, Impetus) {
angular
.module('myApp', [])
.directive('carousel', Carousel)
.directive('carouselSlide', CarouselSlide);
function Carousel() {
return {
scope: false,
restrict: 'E',
replace: true,
template: '<div class="carousel-container"><div class="carousel-wrapper"><div class="carousel-animator" ng-style="getAnimatorStyles()"><div class="carousel-slides-container"><carousel-slide ng-repeat="slide in slides" slide="slide" duplicate="before"></carousel-slide><carousel-slide ng-repeat="slide in slides" slide="slide"></carousel-slide><carousel-slide ng-repeat="slide in slides" slide="slide" duplicate="after"></carousel-slide></div></div></div></div>',
link: function(scope, element) {
scope.container = element;
scope.wrapper = scope.container.children().eq(0);
scope.animator = scope.wrapper.children().eq(0);
scope.slidesContainer = scope.animator.children().eq(0);
scope.animatorWidth = 0;
scope.animatorPosition = 0;
scope.animationRunning = false;
scope.slides = [];
scope.$watch('slides', function() {
if (scope.slides.length > 0) {
_calcDimensions();
_checkAnimationAllowance();
}
}, true);
scope.getAnimatorStyles = function() {
return {
'width': scope.animatorWidth + 'px',
'margin-left': -(scope.animatorWidth / 2) + 'px',
'transform': 'translateX(' + scope.animatorPosition + 'px)'
};
};
function _animationStep() {
if (scope.animationRunning) {
_updateAnimatorPosition(scope.animatorPosition -= 0.25);
scope.animationFrameRequest = window.requestAnimationFrame(_animationStep);
}
}
function _startAnimation() {
if (scope.animationFrameRequest) {
_stopAnimation();
}
scope.animationRunning = true;
scope.animationFrameRequest = window.requestAnimationFrame(_animationStep);
}
function _stopAnimation() {
scope.animationRunning = false;
if (scope.animationFrameRequest) {
window.cancelAnimationFrame(scope.animationFrameRequest);
delete scope.animationFrameRequest;
}
}
function _getAnimationThreshold() {
var wrapperWidth = scope.wrapper[0].getBoundingClientRect().width;
return (scope.animatorWidth - wrapperWidth) / 2 + scope.animatorWidth;
}
function _getPositionWithBounds(posX) {
var animationThreshold = _getAnimationThreshold();
if (posX > animationThreshold) {
posX = posX - scope.animatorWidth;
} else if (posX < -animationThreshold) {
posX = posX + scope.animatorWidth;
}
scope.impetus.setValues(posX, 0);
return posX;
}
function _updateAnimatorPosition(posX) {
scope.$apply(function() {
scope.animatorPosition = _getPositionWithBounds(posX);
});
}
function _checkAnimationAllowance() {
var animationAllowed = _isElementVisible(scope.container[0]);
if (scope.animationRunning && !animationAllowed) {
_stopAnimation();
} else if (!scope.animationRunning && animationAllowed) {
_startAnimation();
}
}
function _isElementVisible(element) {
var rect = element.getBoundingClientRect();
var visible = {
bottom: (rect.top + rect.height) >= 0,
right: (rect.left + rect.width) >= 0,
top: (rect.bottom - rect.height) <= (window.innerHeight || document.documentElement.clientHeight),
left: (rect.right - rect.width) <= (window.innerWidth || document.documentElement.clientWidth)
};
return visible.top && visible.bottom && visible.left && visible.right;
}
function _bindEvents() {
scope.impetus = new Impetus({
source: scope.wrapper[0],
update: _updateAnimatorPosition
});
scope.wrapper
.bind('mouseenter touchstart', function() {
scope.$apply(_stopAnimation);
})
.bind('mouseleave touchend', function() {
scope.$apply(_startAnimation);
});
angular.element(window)
.bind('scroll resize', _checkAnimationAllowance);
}
function _getChannelData() {
scope.slides = [{
"poster": {
"url": "/konstruktory-lego/filter/interesyLego=11/",
"src": "/content/uploads/images/shopper_interest_button_animals.jpg",
"alt": "Тварини"
},
"channel": {
"name": "",
"logo": {
"src": "",
"alt": ""
}
}
}, {
"poster": {
"url": "/konstruktory-lego/filter/interesyLego=9,36/",
"src": "/content/uploads/images/shopper_interest_button_space_and_rockets.jpg",
"alt": "Космос та ракети"
},
"channel": {
"name": "",
"logo": {
"src": "",
"alt": ""
}
}
}, {
"poster": {
"url": "/konstruktory-lego/filter/interesyLego=35/",
"src": "/content/uploads/images/shopper_interest_button_superheroes.jpg",
"alt": "Супергерої"
},
"channel": {
"name": "",
"logo": {
"src": "",
"alt": ""
}
}
}, {
"poster": {
"url": "/konstruktory-lego/filter/interesyLego=1/",
"src": "/content/uploads/images/shopper_interest_button_vehicles.jpg",
"alt": "Транспорт"
},
"channel": {
"name": "",
"logo": {
"src": "",
"alt": ""
}
}
}];
}
function _calcDimensions() {
var slides = scope.slidesContainer.children();
var slide = slides.length > 0 ? slides[0] : null;
var slideWidth = slide ? slide.getBoundingClientRect().width : 0;
var slideTotal = scope.slides.length;
scope.animatorWidth = (slideWidth * slideTotal);
}
function _init() {
_getChannelData();
_bindEvents();
}
_init();
}
};
}
function CarouselSlide() {
return {
scope: {
slide: "=",
duplicate: "@"
},
restrict: 'E',
replace: true,
template: '<div class="carousel-slide" ng-class="getSlideClasses()"> <a href="{{slide.poster.url}}"> <img ng-src="{{slide.poster.src}}" alt="{{slide.poster.alt}}" class="poster"/></a><div class="channel-info-bar"><div class="cell"><img ng-src="{{slide.channel.logo.src}}" alt="{{slide.channel.logo.alt}}" class="channel-logo"/></div><div class="cell"><h6 class="channel-name">{{slide.channel.name}}</h6></div></div></div>',
link: function(scope) {
scope.getSlideClasses = function() {
return {
'duplicate': scope.duplicate,
'before': scope.duplicate === 'before',
'after': scope.duplicate === 'after'
};
};
}
};
}
})(angular, Impetus);
</script>
<div ng-app="myApp"><carousel></carousel></div>
