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] <javascript:>
> 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.
