[英]How to data bind Angular-ui-bootstrap carousel controls?
I would like to control the carousel images with customized controls, looking like this. 我想使用自定义控件来控制轮播图片,如下所示。
So I want the user to be able to control the slides of the carousel with the 3 large menu divs below the carousel. 因此,我希望用户能够通过转盘下方的3个大菜单div来控制转盘的幻灯片。
I'm using the angular-ui-bootstrap carousel which has control buttons by default (the 3 little circles of which the middle one is white (active), so I would want these to be the 3 divs under the carousel). 我正在使用angular-ui-bootstrap轮播,该轮播默认情况下具有控制按钮(中间的三个小圆圈是白色的(活动的)3个小圆圈,因此我希望它们成为转盘下方的3个div。
The styling of the divs is already happening according to the active slide (the active slide makes the corresponding div green). div的样式已经根据活动幻灯片进行(活动幻灯片将相应的div变为绿色)。 What needs to happen is this: when a user clicks on a div, the carousel should go to he corresponding slide. 需要发生的是:当用户单击div时,轮播会转到相应的幻灯片。
My code is below 我的代码如下
<!--CAROUSEL-->
<div class="carouselwrap">
<carousel interval="myInterval" class="carousel">
<slide ng-repeat="slide in slides track by $index" active="slide.active">
<img ng-src="{{slide.images[0].slider}}" alt="{{slide.images[0].slider}}" >
<div class="carousel-caption " class="">
<h1>{{slide.title}}</h1>
<h4>{{slide.description}}</h4>
</div>
</slide>
</carousel>
</div>
<!-- CONTROLS -->
<section>
<article class="col span_1_of_3 promo" ng-repeat="item in slides" ng-class="{active: item.active}">
<h2>{{item.title}}</h2>
<p class="promoinfo">
<span>{{item.description}}</span>
<span class="prijs">€{{item.price}}</span>
</p>
</article>
</section>
You can trigger clicks on your large divs by using ng-click
attribute and pass id or index of the slide in parameter of your ng-click
function ( ex : ng-click="changeActiveSlide(slide.id)"
). 您可以使用ng-click
属性触发大型div ng-click
并在ng-click
函数的参数(例如ng-click="changeActiveSlide(slide.id)"
)中传递幻灯片的ID或索引。 Function which is located in your Angular controller and which can easily change the "active" attribute of the selected slide. 该函数位于Angular控制器中,可以轻松更改所选幻灯片的“活动”属性。
Don't forget to set your new function in the $scope
不要忘记在$scope
设置新功能
Here an example of what your function should seems like : 这里的函数示例如下:
$scope.changeActiveSlide = function(slideId) {
angular.forEach($scope.slides, function(slide) {
slide.active = false; //Desactive all slides
if(slide.id === slideId) {
slide.active = true; //Active the clicked slide
}
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.