These steps work:
1) If not adding the numbers to the list items manually, include what's in
green:
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) {
(index === 0) ?
sliderInd.append("<li data-target='#background-slider'
data-slide-to='"+index+"' class='active'>*"+(index+1)+"*</li>") :
sliderInd.append("<li data-target='#background-slider'
data-slide-to='"+index+"'>*"+(index+1)+"*</li>");
});;
2) Then, add some CSS to overwrite the default negative text-indent
(-999px) on the .carousel-indicators li:
.carousel-indicators li {
text-indent: 0;
}
On Monday, February 11, 2013 8:50:59 AM UTC-5, kshitiz shankar wrote:
>
> 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.
