What should I do if I want to show thousands of pages in a slide-box

I would also be happy to find a solution :blush:

So I’m working on a dirty-as-hell solution to this, still expecting to gain significant performance boost compared to a dumb slidebox with all n slides in the DOM.

Basically I have n slides (0 to n-1). I generate slides 1 through n-2 in zarko’s circular buffer (3-slide) slidebox with does-continue=true.

I have two other slideboxes in the template for the head and tail (2 slides each, does-continue=false) that overlap with the main slidebox (slides 0 and 1, n-2 and n-1, respectively). Then I just ng-show and ng-if them on reaching the head/tail and voila…

Please let me know if someone has already come up with a cleaner solution!

I wonder if anyone came up with a good solution a year after the last post. The circular buffer technique works but doesn’t address the need of stopping the slide at the first and last slide.


I have to show chart from today to (today - n days)
My “solution” based on zarko’s code :

Today : nr=0
today-1 : nr=-1
today-2 : nr=-2

I hide all content on the slide nr=1, slide stops with bounce.

$scope.slideChanged = function ( i ) {
    previous_index = i === 0 ? 2 : i - 1,
            next_index     = i === 2 ? 0 : i + 1,
                    new_direction  = $scope.slides[ i ].nr > $scope.slides[ previous_index ].nr ? 1 : -1;
                            createSlideData( new_direction, direction ),
                            $scope.slides[ new_direction > 0 ? next_index : previous_index ]
                   var lastTail = 0;

var getIfromNr=function(nr){

        for (var i = 0; i < $scope.slides.length; i++) {
            if ($scope.slides[i].nr == nr) {
                return i;
    return -1;

I don’t understand what you mean and don’t see where you’re hidding stuff in the code.
Could you please elaborate more ?
Are you happy with this solution so far ?


You can see my codepen

select first and last slide number

$scope.slideShow={ first:-3, last:2 };

I’m trying to do same with amazing ion-slides (ionic 1.2), but there’s maybe some issues.

1 Like

Thanks a lot for the codepen !


Edit : I’ve been able to implement this successfully in an Android app loading external slides. So it’s a working solution for me.
Thanks again :smile:

Did you ever port this code to Ionic2 or Ionic3 by any chance?

Thank you for posting.