CODEWITHSUNDEEP
angularjshtmlangularjs-ng-repeatcarousel
Elio Chamy
Elio Chamy

Reputation: 269

specify rows number in every item in bootstrap carousel

I'm using bootstrap carousel, where it's devided to items. The first item should always be with active class and the others only class=item.

I'm requesting data, and getting response using angularjs, trying to fill the items with ng-repeat

now my problem is the first item should be class=item active, and get only 4 rows. The other items should be with class=item and every item get only 4 rows.

The request response has more than 70 rows. i'm stuck here, how can I devide the 70 rows to 4 in the first active class, and the rest in the other items (4 rows in each item)

Carousel code :

<div id="myCarousel" class="carousel slide">


    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a>
                </div>
            </div>

        </div>

        <div class="item">
        <div class="row">
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a>
                </div>
            </div>

        </div>

    </div>

Upvotes: 1

Views: 365

Answers (1)

Anurag
Anurag

Reputation: 743

Since you need to show 4 response array items in one carousel item, you can loop through your response array using ng-repeat and show only those items whose index is completely divisible by 4.For example you have 20 items in an array that you want to loop through.You can put a condition in your ng-repeat using ng-if to show only 0th,4th,8th,etc.. items i.e. ($index % 4 == 0) and inside that you can can show 0th,1st,2nd and 3rd items for first row , 4th,5th,6th and 7th for 2nd row ...and so on..

Here is a fiddle demonstrating the same.

Upvotes: 1

Related Questions