rn-carousel-buffered shows first 3 slides then repeats third slide

[c1moore]

I have a large set of slides (currently ~200 slides) and I am using rn-carousel-buffered to mitigate the effect of loading all these slides.

If I try to slide to the fourth slide, the fourth slide will flash for a brief second then the third slide will reappear. If I continue trying to go to the next slide, the same thing will happen: the fourth slide will flash briefly then the third slide will take its place. Interestingly, if I now try to go back I have to go back 5 slides to get to the beginning.

I know the description is a little confusing so I have a video of the problem and will share it with you using via Youtube using the [email protected] email (since it contains other people's emails, I'd rather not post it here).

You can look at the code on my Github here: html: https://github.com/c1moore/frank2015_app/blob/dev/public/view/frankbook.html js: https://github.com/c1moore/frank2015_app/blob/dev/public/js/frankbook.js

[c1moore]

After adding the indicator, I noticed the same thing occurs when going from the end of the slider, too. Same number of slides and the same slide takes over (ie the third slide from the beginning not end).

[c1moore]

I am working on fixing this bug myself. Are there any assumptions you made that would limit the number of slides in a buffered carousel?

[marksy]

@c1moore did you make a fix for the flashing when it loads and updates the slides?

[c1moore]

@marksy The problem was being caused by bindonce in combination with the rn-carousel-buffered attribute. I couldn't find a way to make them work together so I decided to remove bindonce and preload (cache) the slides far enough ahead that the user would not notice a lag from too many pictures being loaded at once.

[thenikso]

thanks @marksy, removing the bindonce fixed this for me too. from:

    <ul
        rn-carousel
        rn-carousel-index="carouselIndex"
        rn-carousel-buffered
        rn-carousel-controls>
        <li ng-repeat="i in ::images">
            <img src="...">
        </li>
    </ul>

to (notice there is no :: before images)

    <ul
        rn-carousel
        rn-carousel-index="carouselIndex"
        rn-carousel-buffered
        rn-carousel-controls>
        <li ng-repeat="i in images">
            <img src="...">
        </li>
    </ul>

[ceichinger]

thanks a lot! solved it for me also

[thari911]

Hey im having this same problem and im not using bindonce. Any help on how to fix this ???

[andertun]

I am also seeing a flash of another slide. I use rn-carousel-buffered and am not using bindonce. I my case sliding from 1 to 2 works fine and 2 to 3 as well. But when sliding from 3 to 4 the 5th slide is flashing briefly before slide 4 is shown. This pattern continues. I.e. when sliding from 11 to 12, slide 13 is briefly visible.

I don't have this problem when I don't use rn-carousel-buffered, but the page is lagging if I load all slides.

I use angular-carousel 1.0.1 and angular 1.3.19.

[identiq]

Fixed by removing the track by $index FROM <li ng-repeat="slide in rg.carouselSlides track by $index"> TO <li ng-repeat="slide in rg.carouselSlides">

[identiq]

• Fixed by using ng-style instead style

FROM <div style="background: url('assets/images/rg/{{slide.backgroundUrl}}') 50% 50%; background-size: cover"> TO

<div ng-style="{'background': 'url('+slide.backgroundUrl +') no-repeat 50% 50% / cover'}">