OK, Bootstrap 2.3 just released which includes pagination functionality!
To auto-generate the carousel indicators you'd now use this (place this
before you call the carousel in js):
var slider = $(".carousel");
slider.append("<ol class='carousel-indicators'></ol>"); //prepend
instead if you want it at the beginning
var sliderInd = $(".carousel-indicators");
slider.find(".carousel-inner").children(".item").each(function(index,
element) {
(index === 0) ?
sliderInd.append("<li data-target='#background-slider'
data-slide-to='"+index+"' class='active'></li>") :
sliderInd.append("<li data-target='#background-slider'
data-slide-to='"+index+"'></li>");
});;
On Friday, February 8, 2013 10:58:36 AM UTC-5, Eddie Staples wrote:
>
> Thanks for this, Nicolas! I extended your work to **auto-generate** the
> .slider-pager div:
>
> var slider = $("#slider-wrapper")
> .carousel({
> interval: 4000
> })
> .bind('slid', function() {
> var index = $(this).find(".active").index();
> $(this).find("a").removeClass(
> 'pager-active').eq(index).addClass('pager-active');
> });
>
> slider.append("<div id='slider-indicator'></div>");
>
> var sliderInd = $("#slider-indicator");
>
>
> slider.find(".carousel-inner").children(".item").each(function(index,
> element) {
> (index === 0) ? sliderInd.append("<a
> class='active'>"+(index+1)+"</a>") :
> sliderInd.append("<a>"+(index+1)+"</a>");
> });;
>
> $("#slider-wrapper .slider-pager a").click(function(e){
> var index = $(this).index();
> slider.carousel(index);
> e.preventDefault();
> });
>
> That way my users don't have to worry about manually updating that part.
> I'm sure it can be improved upon but it gets the job done.
>
> --
> Eddie Staples
> http://about.me/eddiestaples
>
> On Tuesday, June 12, 2012 3:53:17 AM UTC-4, Nicolas Chenet wrote:
>
>>
>> Here is a sample HTML code:
>>
>> <div id="slider-wrapper" class="carousel container">
>> <div class="slider carousel-inner">
>> <div class="active item item-0">
>> <h1>Why organize <br> this type of conference...</h1>
>> </div>
>> <div class="item item-1">
>> <h1>when you can create <br> an experience ?!</h1>
>> </div>
>> <div class="item item-2">
>> <h1>Take your events to the next level</h1>
>> <a href="features" class="call-to-action">Start the tour
>> now</a>
>> <div class="slider-features questions">
>> <h2>Collect questions</h2>
>> <p>From your audience, live</p>
>> <a href="features" title="Collect questions">More
>> information</a>
>> </div>
>> <div class="slider-features stats">
>> <h2>Get statistics</h2>
>> <p>Realtime, dude !</p>
>> <a href="features" title="Get statistics"></a>
>> </div>
>> <div class="slider-features time">
>> <h2>Save time</h2>
>> <p>And we know that time is money</p>
>> <a href="features" title="Save time"></a>
>> </div>
>> </div>
>> </div>
>> <div class="slider-pager">
>> <a href="#slider-wrapper" class="pager-active">0</a>
>> <a href="#slider-wrapper">1</a>
>> <a href="#slider-wrapper">2</a>
>> </div>
>> </div>
>>
>>
>> And the JS that handles this:
>>
>> $("#slider-wrapper .slider-pager a").click(function(e){
>> var index = $(this).index();
>> slider.carousel(index);
>> e.preventDefault();
>> });
>>
>> --
>> *Nicolas Chenet*
>> *Front-end Developer @ Balloon <http://www.balloonup.com>*
>>
>> Email: [email protected]
>> Let's tweet, guys ! @nicolaschenet <https://twitter.com/#!/nicolaschenet>
>>
>>
>>
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
