Use Angular UI Bootstrap to make a Carousel Form

Question

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>

runTarm · Accepted Answer · 2014-08-19 16:49:03Z

2

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.

answered Aug 19, 2014 at 16:49

runTarm

11.6k1 gold badge39 silver badges37 bronze badges

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

1 Comment

Austin Over a year ago

Yea I am also not sure if I shall implement it just yet, but this is very helpful regardless. Thank you!

Nickydonna · Accepted Answer · 2014-08-19 20:26:09Z

1

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.

edited Aug 19, 2014 at 20:26

answered Aug 19, 2014 at 15:58

Nickydonna

8021 gold badge6 silver badges18 bronze badges

1 Comment

runTarm Over a year ago

FYI, unlike the original from bootstrap, there is no events in the ui-bootstrap's carousel.

Collectives™ on Stack Overflow

Use Angular UI Bootstrap to make a Carousel Form

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related