Is there a direct way to add slide numbers inside the indicators?
On Monday, 11 February 2013 21:43:12 UTC+8, Eddie Staples wrote:
>
> 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.
