support custom indicator about angular-carousel

[revolunet]

you can easily create your own indicator :

<ul rn-carousel rn-carousel-index="index"><li ng-repeat="item in items">...</li></ul>
<div>{{ index }} / {{ items.length }}</div>

any other idea ?

[atian25]

I saw this at source:

    template: '<div class="rn-carousel-indicator">' +
                '<span ng-repeat="item in items" ng-class="{active: $index==$parent.index}">●</span>' +
              '</div>'

so I wonder why not support lable before the ●

image
text -----------> ●●●

[ManuelColombo]

I put my own symbol directly on the source.
There is a way to navigate the gallery from indicator?

[revolunet]

@ManuelColombo you mean when you click an indicator to switch to given slide ?

[ManuelColombo]

@revolunet yes I mean exactly what you said

[ManuelColombo]

I modified the min.js this way
`template:'

•

'}}])`

Within ng-click I assign to $parent.index the clicked one's value, it changes my index and move the active bull but doesn't affect the picture.
In my gallery I've two arrow (prev and next) enabled or disabled according to the index of the rn-carousel-index variable. The code in ng-click affect those arrow but not my images.

[revolunet]

i should implement directive controller pattern

[EthanNguyen132]

@revolunet, @ManuelColombo
hi, to write a custom indicator, you may want to override the template of "rnCarouselIndicators" & write your own CSS.
To make the indicator become a real "navigator". you can access parent scope of the directive's scope and pay attention to "goToIndex" function of carouselCollection (managed by carouselmanager).
here's a working piece of code

.directive('rnCarouselIndicators', [function() {
.......
template:

link: function(scope, element, attrs, model) {
scope.goToIndex = function(index, bool){
scope.$parent.carouselCollection.goToIndex(index, bool);
};
console.log();
}
};
}]);

if there's something to improve, that's the animation, currently it's quite laggy compared to bootstrap carousel (via angular directive).
Since my carousel has too many slides, I switch to this carousel to take advantage of "buffered" functionality to prevent rendering overhead.

[revolunet]

Hi guys, FYI, a new refactored version has been pushed, and support clickable indicators.
There's a demo with custom controls and thumbnail navigation...
So basically, for a custom indicator you just need to bind the rn-carousel-index :)