动态更改1帧旋转木马中显示的幻灯片数量

时间:2015-02-20 20:04:56

标签: angularjs carousel angular-ui-bootstrap

我是AngularJS的新手。现在我有一个可重复使用的轮播小部件,我修改后在一个框架中显示2个幻灯片(我将我的轮播作为指令,所以我可以在任何地方使用它)。我正在使用来自angular-ui-bootstrap的轮播组件,我按照post中解释的方式对其进行了修改。

但是,我打算修改我当前的轮播小部件以接受一个数字,该数字将决定将在1帧中显示多少幻灯片,并动态更改其显示。

例如,如果通过3,那么将在1帧中显示3张幻灯片。

我的2-slide-in-1-frame carousel小部件的方式非常静态(1帧中显示的幻灯片数量已在其HTML中定义)。是否有可能做到这一点?任何帮助真的很感激!感谢。

1 个答案:

答案 0 :(得分:0)

无需修改angular-ui-bootstrap轮播,只需在转盘内显示两列或三列的行。

这是我原来的角度ui-bootstrap旋转木马插件的叉子:

http://plnkr.co/edit/F2h3gIQKzpkjymZDgrK6

简短版本是:

<slide ng-repeat="slide in slides" active="slide.active">
    <div class="row">
        <div class="col-xs-6">
            ... first cell
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            ... second cell
        </div>
    </div>
</slide>

然后你可以做的就是创建你自己的模板指令来计算要显示的列数(2 = col-xs-6,3 = col-xs-4,...)并渲染上面的部分使用适当的列类。