CODEWITHSUNDEEP
javascripthtmlangularjscarouselangular-ui-bootstrap
Austin
Austin

Reputation: 3080

Use Angular UI Bootstrap to make a Carousel Form

Could someone build me an example ui.bootstrap carousel that has a manual button for sliding, and include two divs of content? I cannot seem to figure out how to use carousels from just their example.

So far all that I have is the following. (showing just the controller and .html for cleanliness)

Controller

app.controller('RegisterController', function ($scope, $http, $location) {
    $scope.cancel = function () {
        $location.path('/');
    };

        $scope.myInterval = 5000; // I don't want timed-sliding. Only manual
        var slides = $scope.slides = [];
        $scope.addSlide = function () {
            slides.push({

            });
        };
        for (var i = 0; i < 4; i++) {
            $scope.addSlide();
        }

});

Registration.html

<div>
    <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
            <div>{{slide.content}}</div>
        </slide>
        <button>Next</button>
    </carousel>
</div>

If someone could show me a basic example which includes the two following divs that'd be awesome!

slide 1

<div>
   Name: <input type="text" />
</div>

slide 2

<div>
   Password <input type="password" />
</div>

Upvotes: 2

Views: 5547

Answers (2)

Nickydonna
Nickydonna

Reputation: 802

I wouldn't recommend using angular ui bootstrap for this, their carousel is a directive, it should have NO relation with a controller. You should make your own code. You could take a look at their code to see how the calculate sizes and all of that.

EDIT As is says in the comments there are no event in angular ui bootstrap.

Upvotes: 1

runTarm
runTarm

Reputation: 11547

Depending on what you are actually trying to achieve, the carousel might not be suitable for your requirement. In that case, like @donnanicolas has said, it would be better to roll your own implementation.

But regardless of whether it is suitable for your requirement or not, here is a super basic example that you have asked for:

<carousel interval="-1">
  <slide active="activeState[0]">
    <div>
      Name: <input type="text" />
    </div>
  </slide>
  <slide active="activeState[1]">
    <div>
      Password: <input type="password" />
    </div>
  </slide>
</carousel>
<button class="btn btn-default" ng-click="nextSlide()">Next</button>

and in the controller:

$scope.activeState = [true, false];

$scope.nextSlide = function () {
  var activeIndex = $scope.activeState.indexOf(true);
  if (activeIndex >= $scope.activeState.length - 1) {
    return; // already reached the last slide
  }

  $scope.activeState[activeIndex] = false;
  $scope.activeState[activeIndex + 1] = true;
};

Example Plunker: http://plnkr.co/edit/44TMU4I9Di3vQKjkexBf?p=preview

Hope this helps.

Upvotes: 2

Related Questions