Можно ли одновременно показывать два слайда в карусели?

Я только начал изучать Angular.js и использую элемент управления Carousel в Angular-ui. Можно ли одновременно отображать два слайда вместо одного?

Я хочу отображать такие изображения -

< image 1 image 2 >
then
< image 3 image 4 >
then
< image 5 image 6 >

Вот образец -

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


person tempid    schedule 10.04.2013    source источник


Ответы (1)


Вместо этого вы можете сгруппировать изображения вместе и ng-repeat поверх этих сгруппированных изображений. Помимо некоторых необходимых исправлений стиля, вот как это сделать:

http://plnkr.co/edit/5JFeZgTup7abIsjxOeqi?p=preview

HTML:

<carousel interval="myInterval">
  <slide ng-repeat="slideCollection in groupedSlides" active="slide.active">
    <div>
      <img ng-src="{{slideCollection.image1.image}}" style="margin:auto;">      
      <img ng-src="{{slideCollection.image2.image}}" style="margin:auto;">      
    </div>
  </slide>
</carousel>  

JavaScript:

$scope.$watch('slides', function(values) {
  var i, a = [], b;

  for (i = 0; i < $scope.slides.length; i += 2) {
    b = { image1: $scope.slides[i] };

    if ($scope.slides[i + 1]) {
      b.image2 = $scope.slides[i + 1];
    }

    a.push(b);
  }

  $scope.groupedSlides = a;
}, true);
person Langdon    schedule 10.04.2013
comment
Вы, сэр, великолепны! Оно работало завораживающе. Мне пока нравится Angular. Быстрый вопрос - как добавить рамку при наведении курсора на изображение? Просто использовать CSS? Если мне нужно настроить существующий CSS, нужно ли мне загружать bootstrap.css локально, а затем вносить изменения (больше нет CDN)? - person tempid; 11.04.2013
comment
Вы должны иметь возможность использовать селектор :hover в css, чтобы добавить границу, например img:hover { border: 1px solid red; }. И вам не нужно загружать bootstrap.css и изменять его, вы можете редактировать свой собственный файл css локально и включать его после bootstrap.css, чтобы перезаписать все, что вы хотите. - person Langdon; 11.04.2013
comment
Спасибо за уделенное время. В этом есть смысл. - person tempid; 11.04.2013
comment
Поможет ли этот ответ в целом. Например, если у меня есть n изображений в массиве. На данный момент этот ответ отображается только для 2 изображений (статических). А если динамический? - person user3202087; 09.10.2015
comment
Что делать, если мне нужно отобразить 4 слайда? - person serge; 27.01.2016
comment
@Serge добавьте 4 тега ‹img> и измените логику внутри $watch - person Langdon; 27.01.2016