Angular UI Boostrap's Carousel

[Matt Raible]

I'm looking at trying to convert my project's use of Bootstrap's
Carousel plugin to Angular UI's version.

http://angular-ui.github.com/bootstrap/#/carousel

In Bootstrap 2.3, there's "carousel-indicators" to navigate between
slides.

http://twitter.github.com/bootstrap/javascript.html#carousel

This feature doesn't appear to be in Angular UI's version. Are there
plans to add it?

Thanks,

Matt

[Peter Bacon Darwin]

https://github.com/angular-ui/bootstrap/pull/168

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.

[Pawel Kozlowski]

Hi Matt!

It is already in master, landed in this commit:
https://github.com/angular-ui/bootstrap/commit/3b677eed460354b7c02bf23b6624ee179ec125a3

I hope that we will do the release soon (like within 2-3 days) but
till now you can grab the version from the GitHub repo.
Let me know if you've got problems building it, we've got CI server
with the latest version built.

Cheers,
Pawel

> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
> To post to this group, send email to ang...@googlegroups.com.
> Visit this group at http://groups.google.com/group/angular?hl=en-US.
> For more options, visit https://groups.google.com/groups/opt_out.
>
>

--
Looking for bootstrap-based widget library for AngularJS?
http://angular-ui.github.com/bootstrap/

[Matt Raible]

Thanks guys! I was able to clone, build and use this successfully. One suggestion: rename the final JS files from ui-bootstrap to angular-ui-bootstrap. I have a related question, but I'll add it in a new thread.

[Matt Raible]

Is it possible to hook into the 'slid' and 'slide' events in this
directive like you can with Bootstrap's? The following doesn't seem to
work.

$('.carousel').bind('slid', function() {
alert("Slide Event");
});

On Feb 28, 9:27 am, Pawel Kozlowski <pkozlowski.opensou...@gmail.com>
wrote:
> Hi Matt!
>
> It is already in master, landed in this commit:https://github.com/angular-ui/bootstrap/commit/3b677eed460354b7c02bf2...

>
> I hope that we will do the release soon (like within 2-3 days) but
> till now you can grab the version from the GitHub repo.
> Let me know if you've got problems building it, we've got CI server
> with the latest version built.
>
> Cheers,
> Pawel
>
>
>
>
>
>
>
>
>
> On Thu, Feb 28, 2013 at 5:25 PM, MattRaible<mrai...@gmail.com> wrote:
> > I'm looking at trying to convert my project's use of Bootstrap's
> > Carousel plugin to Angular UI's version.
>
> >http://angular-ui.github.com/bootstrap/#/carousel
>
> > In Bootstrap 2.3, there's "carousel-indicators" to navigate between
> > slides.
>
> >http://twitter.github.com/bootstrap/javascript.html#carousel
>
> > This feature doesn't appear to be in Angular UI's version. Are there
> > plans to add it?
>
> > Thanks,
>
> > Matt
>
> > --
> > You received this message because you are subscribed to the Google Groups "AngularJS" group.
> > To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
> > To post to this group, send email to ang...@googlegroups.com.
> > Visit this group athttp://groups.google.com/group/angular?hl=en-US.

> > For more options, visithttps://groups.google.com/groups/opt_out.

[Pawel Kozlowski]

Hi!

Nope, there is no such hook at the moment. I guess it should be trivial to add given a good use case for this.

A feature request (or even better - pull request!) would be great.

Cheers,

Pawel

Visit this group at http://groups.google.com/group/angular?hl=en-US.

For more options, visit https://groups.google.com/groups/opt_out.

[Matt Raible]

New question: 

Does the Angular UI Carousel have a feature to hide the navigation elements when there's only 1 element? Or would you recommend doing this another way?

Thanks,

Matt

[Pawel Kozlowski]

Hi!

On Tue, Mar 12, 2013 at 6:08 PM, Matt Raible <mra...@gmail.com> wrote:
> Does the Angular UI Carousel have a feature to hide the navigation elements
> when there's only 1 element?

Nope, not at the moment, but this would be trivial to do by changing a
template for the carousel:
https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html

> Or would you recommend doing this another way?

I guess this is about dynamically generated slides, right? Otherwise
there is not much of the carousel with just one element :-)

For now you can either modify a template (to ng-hide navigation based
on length of slides() call) or ... open an issue for this if you feel
like this should go to the core.

Cheers,
Pawel

[Matt Raible]

On Mar 12, 2013, at 11:13 AM, Pawel Kozlowski <pkozlowski...@gmail.com> wrote:

> Hi!
>
> On Tue, Mar 12, 2013 at 6:08 PM, Matt Raible <mra...@gmail.com> wrote:
>> Does the Angular UI Carousel have a feature to hide the navigation elements
>> when there's only 1 element?
>
> Nope, not at the moment, but this would be trivial to do by changing a
> template for the carousel:
> https://github.com/angular-ui/bootstrap/blob/master/template/carousel/carousel.html
>
>> Or would you recommend doing this another way?
>
> I guess this is about dynamically generated slides, right? Otherwise
> there is not much of the carousel with just one element :-)
>
> For now you can either modify a template (to ng-hide navigation based
> on length of slides() call) or ... open an issue for this if you feel
> like this should go to the core.

Thanks for the fast response. Do you mean something like the following or do I need to use slides().length?

<div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
<ol class="carousel-indicators" ng-hide="slides.length == 0">
<li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
</ol>
<div class="carousel-inner" ng-transclude></div>
<a ng-click="prev()" class="carousel-control left" ng-hide="slides.length == 0">&lsaquo;</a>
<a ng-click="next()" class="carousel-control right" ng-hide="slides.length == 0">&rsaquo;</a>
</div>

[Pawel Kozlowski]

Hi!

On Tue, Mar 12, 2013 at 6:28 PM, Matt Raible <mra...@gmail.com> wrote:
> Thanks for the fast response. Do you mean something like the following or do I need to use slides().length?

yep, the collection of slides is exposed via slides()

Probably the shortest form would be:

<a ng-click="prev()" class="carousel-control left"

ng-show="slides().length">&lsaquo;</a>

<a ng-click="next()" class="carousel-control right"

ng-show="slides().length">&rsaquo;</a>

Cheers,
Pawel

> <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel">
> <ol class="carousel-indicators" ng-hide="slides.length == 0">
> <li ng-repeat="slide in slides()" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
> </ol>
> <div class="carousel-inner" ng-transclude></div>
> <a ng-click="prev()" class="carousel-control left" ng-hide="slides.length == 0">&lsaquo;</a>
> <a ng-click="next()" class="carousel-control right" ng-hide="slides.length == 0">&rsaquo;</a>
> </div>

[Matt Raible]

On Mar 12, 2013, at 11:32 AM, Pawel Kozlowski <pkozlowski...@gmail.com> wrote:

> Hi!
>
> On Tue, Mar 12, 2013 at 6:28 PM, Matt Raible <mra...@gmail.com> wrote:
>> Thanks for the fast response. Do you mean something like the following or do I need to use slides().length?
>
> yep, the collection of slides is exposed via slides()
>
> Probably the shortest form would be:
>
> <a ng-click="prev()" class="carousel-control left"
> ng-show="slides().length">&lsaquo;</a>
> <a ng-click="next()" class="carousel-control right"
> ng-show="slides().length">&rsaquo;</a>
>
> Cheers,
> Pawel
>

I ended up using slides().length > 1 and created a pull request. Tests pass, but I'm not sure if new tests are needed. Please let me know if there's more I need to do to contribute.

https://github.com/angular-ui/bootstrap/pull/217

Cheers,

Matt

[Pawel Kozlowski]

Hi Matt!

On Tue, Mar 12, 2013 at 7:07 PM, Matt Raible <mra...@gmail.com> wrote:
> I ended up using slides().length > 1 and created a pull request. Tests pass, but I'm not sure if new tests are needed. Please let me know if there's more I need to do to contribute.
>
> https://github.com/angular-ui/bootstrap/pull/217

Thnx for taking time to open this PR.
Test for the new functionality would be awesome, otherwise there is a
risk that something bad will happen to it in the subsequent
refactorings.

Cheers,
Pawel

[Karthik B]

Is the lazy-load option available?. I couldnt see it. Can you please help me..

[Adrian Ryniec]

Is it possible somehow to add elements other than img to slides?

Like, whole DIV container filled with other elements and data?

I'd like to create carousel slider which displays both images and clickable, interactive, HTML elements as slides (like tables, divs, canvas .etc), but couldn't find any hint how to do it and whether it's possible.
Thx for eventual help :)