Carousel indicators without ng-repeat

[moisespio]

Hello folks!

I'm not using ng-repeat on my carousel, but I want to use the indicators. There is any way to do this?

Thanks!

[revolunet]

did you try ? it should work :)

[moisespio]

Sure, I've tried something like this...

<ul class="featured" rn-carousel rn-carousel-auto-slide>
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide</li>
</ul>

<div rn-carousel-indicators></div>

I missed something?

[revolunet]

yep you need to share an index with the indicators :

add this to rn-carousel-indicators slides="slides" rn-carousel-index="carouselIndex"

slides can be [0, 0, 0] i guess (just an array to know how many slides you have)

[revolunet]

also add rn-carousel-index="carouselIndex" to the carousel and expose that index in the scope

[moisespio]

Still not working bro, sorry if I still missing something...

$scope.slides = [0, 0, 0];

<ul class="featured" rn-carousel rn-carousel-auto-slide rn-carousel-index="carouselIndex">
    <li>First Slide</li>
    <li>Second Slide</li>
    <li>Third Slide</li>
</ul>

<div rn-carousel-indicators slides="slides" rn-carousel-index="carouselIndex"></div>

[revolunet]

maybe its not implemented, not sure. will try to add a demo.

[moisespio]

Ok, thanks for your support :)

[sick]

Try with

<div rn-carousel-indicators ng-if="slides" slides="slides" rn-carousel-index="carouselIndex"></div>

[moisespio]

Still not working :(

[abhishek-g]

Hi ,

Superb plugin i have to say first..

I too will like to have this feature.

Still having the same issue.

[moisespio]

Hello @revolunet Any update about this issue?

Thanks!

[MattSidor]

I'll add to the chorus with a "Me too!" -- I can't get this to work either.

Still a great plugin though, even without this capability. Thank you!

[MintyOrb]

+1 in the same boat

[dirkgroenen]

Just had the same 'problem' but should be easy to fix by assigning an array to the slides attribute. The code I've used:

<ul class="slidewrap" rn-carousel rn-carousel-index="carouselIndex">
    <li class="slide">
        ...
    </li>
    <li class="slide">
        ...
    </li>
    <li class="slide">
        ...
    </li>
    <li class="slide">
        ...
    </li>
</ul>
<div rn-carousel-indicators slides="[0,1,2,3]" rn-carousel-index="carouselIndex"></div>

[jchaney01]

I fixed this issue by changing https://github.com/revolunet/angular-carousel/blob/0.3.10/dist/angular-carousel.js#L66 with indexModel.assign(scope.$parent, index);

[jchaney01]

Just an update, if the ng-if="slides.length > 1" is not present, it will not work. Otherwise, remove the $parent. This is because the indicator template uses ng-repeat which creates an isolate scope.

[MintyOrb]

@dirkgroenen Defining the array in the html makes the indicators visible, but does clicking on the indicator to switch to the relevant slide work for you?

[dirkgroenen]

Nope, unfortunately that's the only thing which doesn't work. But I haven't tried anything to make it work since I don't need it for the current project.

[wormsan]

I use this method for custom indicators.Hope it helps.

/*in controller.js*/
.controller('carousel',['$scope',function($scope){
    $scope.slides = [2,1,0];
}]);

/*in html*/
<div ng-controller="carousel">
    <ul class="featured" rn-carousel rn-carousel-auto-slide rn-carousel-index="carouselIndex">
        <li>First Slide</li>
        <li>Second Slide</li>
        <li>Third Slide</li>
    </ul>

    <div class='indicators'>
        <span class='default' ng-repeat="index in slides" ng-class="{'active':carouselIndex==index}" ></span>
    </div>
</div>

[howtomake]

EggFiredRice, thanx, this works )

[khellhake]

This thread helped out helped out a lot! declaring the carouselIndex did the trick for me. Thanks!