Is there any way I can know what is the current active slide?
var slides = slides = [];
slides.push({text: 'Slide 1', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false
}});
slides.push({text: 'Slide 3', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false
}});
$scope.slides=slides;
<carousel>
<slide ng-repeat="slide in slides">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
I am not sure were i need to add watch though?
Please treat this as a seperate question:
You can see from my code there are 2 charts information in the slide. But when its presented / slided second one alone gets squeezed in width.
In other words is there any way i can auto scale the highchart at the time of rendering?
Is there any work around to fix it.
In browsers where the Page Visibility API is supported, the carousel will avoid sliding when the webpage is not visible to the user (such as when the browser tab is inactive, the browser window is minimized, etc.).
The Carousel plugin is a component for cycling through elements, like a carousel (slideshow).
The Data-interval attribute is used to set the interval time between two carousel item by default its value is 3000 milliseconds.
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It works with a series of images, text, or custom markup. It also includes support for previous/next controls and indicators.
Update:
Actually, angular-ui
does allow you to set an active
property on the slide
directive which will be set to true when the slide becomes active.
In this example: slide.active
will be set to true
when the slide is active.
<carousel>
<slide ng-repeat="slide in slides" active="slide.active">
<highchart id="chart{{$index}}" config="slide.chartConfig"></highchart>
</slide>
</carousel>
Controller
var slides = slides = [];
slides.push({
active: false
, text: 'Slide 1'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false }
}
);
slides.push({
active: false
, text: 'Slide 3'
, type: "chart"
, chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false }
}
);
$scope.slides=slides;
// May return `undefined` if no slide is active
// (e.g. when the carousel hasn't initialised)
$scope.getActiveSlide = function () {
return slides.filter(function (s) { return s.active; })[0];
};
There was an issue to add this information to the slide
event, but they decided not to do it.
There are some workarounds to it though:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With