Angular UI Bootstrap Slider Multiple items per slide
I tried this one that has been responsively designed
in some way to render different number of items depending on screen resolution.
http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
cpk
Updated on June 15, 2022Comments
-
cpk almost 2 years
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>