How to data bind Angular-ui-bootstrap carousel controls?

Question

I would like to control the carousel images with customized controls, looking like this. carousel controls

So I want the user to be able to control the slides of the carousel with the 3 large menu divs below the carousel.

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).

The styling of the divs is already happening according to the active slide (the active slide makes the corresponding div green). What needs to happen is this: when a user clicks on a div, the carousel should go to he corresponding slide.

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">&euro;{{item.price}}</span>
        </p>
    </article>
</section>

Hornth · Accepted Answer · 2015-04-16 09:49:24Z

1

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)"). Function which is located in your Angular controller and which can easily change the "active" attribute of the selected slide.

Don't forget to set your new function in the $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
        }
    });
}

edited Apr 16, 2015 at 9:49

answered Apr 16, 2015 at 7:53

Hornth

3236 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

RobSeg Over a year ago

Thanks, already a big step. I can pass the clicked divs index to the slider but the index is a number and the slide.active is a boolean. How could I set the active slide to true based on a numbered index?

Hornth Over a year ago

I will update my response with an example of function to use. Maybe you will have to do some changes.

RobSeg Over a year ago

Thank you for the update, I got it working with minor changes.

Collectives™ on Stack Overflow

How to data bind Angular-ui-bootstrap carousel controls?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related