1

I am trying to display four items in a slide. But how do I repeat it the main row, because it uses an active class for the active slide. This is how my HTML looks.

<div class="carousel slide" id="myCarousel">
        <div class="carousel-inner">
            <div class="item active">
                <div class="row">
                    <div class="col-xs-3" ng-repeat="image in images"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>

And an example of the JSON.

$scope.images = [
"http://placehold.it/500/e499e4/fff&amp;text=1",
"http://placehold.it/500/e499e4/fff&amp;text=2",
"http://placehold.it/500/e499e4/fff&amp;text=3",
"http://placehold.it/500/e499e4/fff&amp;text=4",
"http://placehold.it/500/e499e4/fff&amp;text=5",
"http://placehold.it/500/e499e4/fff&amp;text=6",
"http://placehold.it/500/e499e4/fff&amp;text=7",
]
Aijaz
  • 680
  • 15
  • 42

1 Answers1

0

One way you can do it is divide the array in chunks...

<div class="item active">
    <div class="row">
        <div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>
    </div>
</div>
<div class="item">
    <div class="row">
        <div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>
    </div>
</div>

Demo

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Thanks. But what about moving the 'active' class around, when the active div is supposed to be on display. – Aijaz Mar 27 '17 at 21:42
  • What do you mean? The item with the 4 columns is made active as you have a multi item carousel. See the demo. – Carol Skelly Mar 28 '17 at 01:10
  • Here
    repeated two times but i have to fix that count dynamically how do i do that
     – Vishnu Sep 07 '18 at 09:07