Multi-item responsive carousel

Question

I\'m building a website that requires a carousel to be implemented. Because this website is built on AngularJS I wanted to go with Angulars Boostrap Carousel, h

Answer 1

So, I tried this one so as to make angularjs Carousel (ui.bootstrap.carousel) to work with multi items per animation. I have also tried to apply [Detection for Responsive Websites using AngularJS].2

Take a look here: http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview

Results:

1 ) One Item (Mobile Version) :

2 ) Two Items (Tablet Version) :

3 ) Three Items (Desktop Version) :

PART 2: It can also detect the resolution of the window so as to determine if it is tablet,mobile or desktop following this tutorial... Try to use this values: "mobile, tablet, desktop" to see the three different view versions.

Demonstration of the tablet version:

var app = angular.module('myApp', ['ui.bootstrap', 'angular-responsive']);

app.controller('MainCtrl', function($scope) {
  $scope.displayMode = 'mobile'; // default value


  $scope.$watch('displayMode', function(value) {

    switch (value) {
      case 'mobile':
        // do stuff for mobile mode
          console.log(value);
        break;
      case 'tablet':
        // do stuff for tablet mode
          console.log(value);
        break;
    }
  });
});

function CarouselDemoCtrl($scope) {
  var whatDevice = $scope.nowDevice;
  $scope.myInterval = 7000;
  $scope.slides = [{
    image: 'http://placekitten.com/221/200',
    text: 'Kitten.'
  }, {
    image: 'http://placekitten.com/241/200',
    text: 'Kitty!'
  }, {
    image: 'http://placekitten.com/223/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/224/200',
    text: 'Feline!'
  }, {
    image: 'http://placekitten.com/225/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/226/200',
    text: 'Feline!'
  }, {
    image: 'http://placekitten.com/227/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/228/200',
    text: 'Feline!'
  }, {
    image: 'http://placekitten.com/229/200',
    text: 'Cat.'
  }, {
    image: 'http://placekitten.com/230/200',
    text: 'Feline!'
  }];


    var i, first = [],
      second, third;
    var many = 1;

    //##################################################    
    //Need to be changed to update the carousel since the resolution changed
    $scope.displayMode = "tablet";
    //##################################################
    if ($scope.displayMode == "mobile") {many = 1;}
    else if ($scope.displayMode == "tablet") {many = 2;} 
    else {many = 3;}

    for (i = 0; i < $scope.slides.length; i += many) {
      second = {
        image1: $scope.slides[i]
      };
      if (many == 1) {}
      if ($scope.slides[i + 1] && (many == 2 || many == 3)) {
        second.image2 = $scope.slides[i + 1];

      }
      if ($scope.slides[i + (many - 1)] && many == 3) {
        second.image3 = $scope.slides[i + 2];
      }
      first.push(second);
    }
    $scope.groupedSlides = first;
}

app.directive('dnDisplayMode', function($window) {
  return {
    restrict: 'A',
    scope: {
      dnDisplayMode: '='
    },
    template: '',
    link: function(scope, elem, attrs) {
      var markers = elem.find('span');

      function isVisible(element) {
        return element && element.style.display != 'none' && element.offsetWidth && element.offsetHeight;
      }

      function update() {
        angular.forEach(markers, function(element) {
          if (isVisible(element)) {
            scope.dnDisplayMode = element.className;
            return false;
          }
        });
      }

      var t;
      angular.element($window).bind('resize', function() {
        clearTimeout(t);
        t = setTimeout(function() {
          update();
          scope.$apply();
        }, 300);
      });

      update();
    }
  };
});

Hope it helps!