vasyabigi / angular-slick

Angular directive for slick-carousel
http://vasyabigi.github.io/angular-slick/
MIT License
500 stars 237 forks source link

Large Collection with ng-repeat performance #155

Open bgadiel opened 8 years ago

bgadiel commented 8 years ago

Hi, I am using angular-slick for displaying a large collection of items ~1000 with ng-repeat (5 each time). Is there a way to lower the number of items loaded on the DOM and get better performance? I mean - are the hidden items can be added dynamically of each click on NEXT btn? Or maybe somehow optimize the hidden elements with ng-if? My code:

<slick infinite="false"
                       slides-to-show="5"
                       slides-to-scroll="5"
                       prev-arrow=".dna_{{ $index }}_back"
                       next-arrow=".dna_{{ $index }}_next"
                       responsive="[{
                            breakpoint: 1824,
                            settings: { slidesToShow: 5, slidesToScroll: 5, }
                        }, {
                            breakpoint: 1280,
                            settings: { slidesToShow: 3, slidesToScroll: 3 }
                        }]">
                    <div ng-repeat="item in vm.items[category] track by $index">
<div>{{ :: item.title }}</div>
....
...
</div>
</slick

Thanks