CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
RobSeg
RobSeg

Reputation: 1035

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

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>

Upvotes: 2

Views: 1716

Answers (1)

Hornth
Hornth

Reputation: 323

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
        }
    });
}

Upvotes: 1

Related Questions