【问题标题】:Possible to show two slides in the carousel at a time?可以一次在轮播中显示两张幻灯片吗?
【发布时间】:2013-04-02 20:34:52
【问题描述】:

我刚开始学习 Angular.js,我正在使用 Angular-ui 中的 Carousel 控件。是否可以同时显示两张幻灯片而不是一张?

我想显示这样的图像 -

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

这是一个示例 -

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

【问题讨论】:

    标签: twitter-bootstrap angularjs carousel angular-ui angular-ui-bootstrap


    【解决方案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);
    

    【讨论】:

    • 你先生,真棒!它就像一个魅力。到目前为止,我很喜欢 Angular。快速提问 - 当我将鼠标悬停在图像上时如何添加边框?只使用CSS?如果我需要调整现有的 CSS,是否需要在本地下载 bootstrap.css,然后进行更改(不再使用 CDN)?
    • 你应该可以在css中使用:hover选择器来添加边框,比如img:hover { border: 1px solid red; }。而且你不需要下载bootstrap.css和修改它,你可以在本地编辑你自己的css文件并在bootstrap.css之后包含它来覆盖你想要的任何东西。
    • 感谢您的宝贵时间。这是有道理的。
    • 这个答案一般会有帮助吗?就像我在一个数组中有 n 个图像一样。截至目前,此答案仅显示 2 张图像(静态)。如果它是动态的呢?
    • 如果我需要显示 4 张幻灯片怎么办?
    猜你喜欢
    • 2022-11-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-14
    • 2021-01-15
    • 2021-01-17
    • 2014-04-28
    • 1970-01-01
    相关资源
    最近更新 更多