Issue with setting initial slide index

[thkus]

Hi there!

I'm trying to set the initial slide to another rn-carousel-index than 0. When the collection is set, and i update the index, i see that it snaps back to 0.

This is my definition of rn-carousel-index in the markup rn-carousel-index="slider.pageIndicator". When i replace it with the following rn-carousel-index="{{ slider.pageIndicator }}"; setting the initial index works but i my $watch doesn't get triggered anymore.

Do you have any idea how i can achieve both? Setting the index and still be able to receive the current index if it changes?

Help is much appreciated.

[prinz-z]

Hi,

I had a similar problem, but in my case, rn-carousel-index="{{slider.pageIndicator}}" was not working, instead, I had to use rn-carousel-index="{{slider.pageIndicator * 1}}". Just in case it helps someone.

[parliament718]

Hi I'm experiencing the same issue, and prinz-z's solution didn't work for me, throws errors.

Can we get a fix for this? Simply removing the line scope.carouselIndex = 0; only works temporarily then reverts to broken behavior after re-init.

[ragamufin]

I had the same problem and @prinz-z 's solution did not work for me. I got it working by reading the code and then working around it. Until this is fixed here's what you can do:

1. Set rn-carousel-index to your model's position. Make sure you use dot notation and no curly brackets, for e.g.

rn-carousel-index="data.position"

1. Before your view loads with the carousel, keep track of your desired starting position but set the model position to null. This will cause the carousel to change it to 0.
2. Set a watch on the position changing so that when it changes from null to 0 you can set it to your original intended starting position and then remove the watch. e.g.

// only need to run this if we have an initial position other than 0
if($scope.model.position){
    var pos_initial = $scope.model.position;
    // console.info('Initial position:', pos_initial);
    $scope.model.position = null;
    // if position is set then jump to that position as soon as the carousel loads
    var promise_watch = $scope.$watch('model.position', function(pos){
        if(pos !== 0) return; // will be fired for null value which we don't care about

        console.info('Setting initial position:', pos_initial);
        $scope.model.position = pos_initial;
        promise_watch(); // remove watch after setting the position
    });
}

So basically I'm suggesting waiting until the carousel runs its initial logic and the binding to your index is complete then set it to your desired position. So far for me this happens fast enough that it's as if the position was set to begin with and there is no flicker or anything of the sort.

[thenikso]

I believe that the problem is here with the carouselIndex being set to 0.

A fix would be awesome. maybe something like:

if (typeof scope.carouselIndex !== 'number') {
  scope.carouselIndex = 0;
}

[parliament718]

@thenikso that doesn't fix it for me.

[ragamufin]

Actually I think the problem rather is here. If we pass in rnCarouselIndex then it creates the indexModel which it will use in order to assign the position of the carousel whenever it changes. However at startup, line 361 set the position to 0 therefore this watch will overwrite whatever model we pass in as our starting position.

[thenikso]

agree, I got it wrong. I was only eyeballing that. would be nice if this get fixed in master