Angular UI Bootstrap Slider Multiple items per slide

Question

I am connecting to a web service and want to populate A UI Bootstrap carousel with 4 items for each slide. I am using | limitTo:4, but I need a way to limit 4 per slide out of the 10 total.

Here is the HTML

<div class="row event-slider" ng-controller="eventsController">
<div ng-controller="sliderController">
    <carousel interval="interval" class="col-sm-12">
        <slide class="col-sm-12">
            <div class="col-sm-3 event" ng-repeat="event in eventData | limitTo:4">
                <div class="event-inner">
                    <img ng-src="{{event.image.block250.url}}">
                    <div class="event-details">
                        <h4 class="uppercase">{{event.title}}</h4>
                        <!-- {{event.}} -->
                    </div>
                </div>
            </div>
        </slide>
    </carousel>
</div>
</div>

Controller for reference

app.controller("eventsController", function($scope, $http) {

    var events = $http.get('/events');

    events.success(function(data) {

        $scope.eventData = data.events["event"];
        console.log($scope.eventData);

    });

});

There is probably an easy solution that Im missing using a ng-repeat filter. Thanks a bunch for the help.

UPDATE: I am not accounting for responsive, but will need to at a later time(agile sprint). Still wrapping my mind around the += in the loop, but its working well. I think I am starting on the 4th item and going up from there... Thanks again for your help.

var events = $http.get('/events');
var i;

events.success(function(data) {

    $scope.eventData = data.events["event"];

    $scope.slideGroup = [];

    for (i = 0; i < $scope.eventData.length; i += 4) {

        slides = {
            'first' : $scope.eventData[i],
            'second' : $scope.eventData[i + 1],
            'third' : $scope.eventData[i + 2],
            'fourth' : $scope.eventData[i + 3]
        };
        console.log($scope.slideGroup);
        $scope.slideGroup.push(slides);
    }

});

HTML:

    <carousel interval="interval" class="col-sm-12">
        <slide class="col-sm-12" ng-repeat="event in slideGroup">
            <div class="col-sm-3 event">
                <div class="event-inner">
                    <img ng-src="{{event.first.image.url}}">
                    <div class="event-details">
                        <h4 class="uppercase">{{event.first.title}}</h4>

                    </div>
                </div>
            </div>
            <div class="col-sm-3 event">
                <div class="event-inner">
                    <img ng-src="{{event.second.image.url}}">
                    <div class="event-details">
                        <h4 class="uppercase">{{event.second.title}}</h4>

                    </div>
                </div>
            </div>
            <div class="col-sm-3 event">
                <div class="event-inner">
                    <img ng-src="{{event.third.image.url}}">
                    <div class="event-details">
                        <h4 class="uppercase">{{event.third.title}}</h4>

                    </div>
                </div>
            </div>
            <div class="col-sm-3 event">
                <div class="event-inner">
                    <img ng-src="{{event.fourth.image.url}}">
                    <div class="event-details">
                        <h4 class="uppercase">{{event.fourth.title}}</h4>

                    </div>
                </div>
            </div>
        </slide>
    </carousel>

"I am using | limitTo:4, but I need a way to limit 4 per slide out of the 10 total." Do you mean that you need 1-4 on the first, 5-8 on the 2nd and so on? — Blackunknown, Oct 06 '14 at 15:29
@cpk You probably may want to utilize `ngRepeat`'s `$index` value which helps you to determine at which position you are in a given moment. That may point you in the right direction because you could compare against that value and based on the value format your HTML markup accordingly. — developer10, Oct 06 '14 at 15:40
@cpk here is an example on someone using the ng-show to do what you want although it is not optimal. http://stackoverflow.com/a/20858450/746817 The answer below this one is more brilliant: http://stackoverflow.com/a/20858583/746817 — Blackunknown, Oct 07 '14 at 07:39

Giannis Grivas · Accepted Answer · 2014-10-21T15:52:58.573

8

I tried this one that has been responsively designedin some way to render different number of items depending on screen resolution.

http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

enter image description here

edited Oct 21 '14 at 15:52

answered Oct 20 '14 at 16:29

Giannis Grivas

3,374
1
18
38

1

Came from this question http://stackoverflow.com/questions/26252038/multi-item-responsive-carousel/26456191#26456191 – Giannis Grivas Oct 20 '14 at 16:29
Crafted a custom version of this to fit my use case. Thank you much John. – cpk Oct 20 '14 at 18:32
John, quick follow up question.... I am filling each slide with 4 divs with a lot of bindings, as well as multiple slider instances. Is there a way I can make this less verbose? I am fine with it working as is, but for future reference it could be good to know. Thanks again. – cpk Oct 20 '14 at 22:59
1

Yes I am working on a github project which will be ready n two weeks that you will love....Be a little patient, I'll inform you my friend ,we weill be in touch:) thnks – Giannis Grivas Oct 21 '14 at 13:41
Awesome John, look forward to seeing it! Thanks :} – cpk Oct 21 '14 at 15:44
@GiannisGrivas did you finished that project and can i take a look at it somewhere? – iH8 Jan 21 '16 at 23:22

Angular UI Bootstrap Slider Multiple items per slide

1 Answers1