I have incorporated Bootstrap's carousel into my project, with the controller set up as follows:
.controller('HomeController', function () {
var self = this;
self.interval = 2000;
self.designer = [{
image: '/assets/images/carousel/designer/slide-1.jpg'
}, {
image: '/assets/images/carousel/designer/slide-2.jpg'
}, {
image: '/assets/images/carousel/designer/slide-3.jpg'
}, {
image: '/assets/images/carousel/designer/slide-4.jpg'
}, {
image: '/assets/images/carousel/designer/slide-5.jpg'
}, {
image: '/assets/images/carousel/designer/slide-6.jpg'
}];
});
The corresponding view appears as shown below:
<div carousel interval="controller.interval" no-pause controls="false">
<div slide ng-repeat="slide in controller.designer" active="slide.active">
<img ng-src="{{ slide.image }}" style="margin:auto;">
</div>
</div>
In this specific carousel setup, I want to eliminate the presence of controls. By default, there is no attribute provided to remove controls (after checking the JS file), so initially, I used CSS styling to handle this for me:
.no-controls .carousel-indicators,
.no-controls .carousel-control {
display: none;
}
Although this approach seemed effective, an issue arose when hovering over the controls – it caused the carousel to pause, which was not intended. Consequently, I devised a directive that requires the carousel directive as showcased below:
.directive('controls', function () {
return {
restrict: 'A',
require: 'carousel',
link: function (scope, element, attr) {
// Define variables
var showControls = attr.controls ? false : true;
// Check if controls should be hidden
if (!showControls) {
// Access element children
var children = element.children();
// Iterate through element children
for (var i = 0; i < children.length; i++) {
// Get current child
var child = angular.element(children[i]);
// Remove control if exists
if (child.hasClass('carousel-indicators') || child.hasClass('carousel-control')) {
child.remove();
}
}
}
}
}
});
This directive inspects whether we've configured it like this: controls="false", and if so, it scans through the carousel's children to remove any found controls. Despite this solution, the carousel still pauses when hovered over. Any suggestions on how to prevent this pausing behavior?