twitter bootstrap - jQuery - show one by one, classes step1, step2, step3 -

this question related bootstrap carousel.

i want show items 1 one inside carousel item.

like:

<div class="carousel-inner">     <div class="active item">         <div class="step3">..</div>         <div class="step1">..</div>         <div class="step2">..</div>     </div>     <div class="item">…</div>     <div class="item">…</div> </div> 

when carousel item active show

step1 then step2 then step3 step4. .. . ... .

i know insert code in bootstrap carousel plugin, don't know how start:

here code can write code need (about line 125):

if ($.support.transition && this.$element.hasclass('slide')) {     this.$element.trigger(e)     if (e.isdefaultprevented()) return     $next.addclass(type)     $next[0].offsetwidth // force reflow     $active.addclass(direction)     $next.addclass(direction)     this.$element.one($.support.transition.end, function () {         $next.removeclass([type, direction].join(' ')).addclass('active')         $active.removeclass(['active', direction].join(' '))         that.sliding = false         settimeout(function () {             that.$element.trigger('slid')         }, 0)     }) } else {..... } 

you shouldn't editing base bootstrap plugins ideally or might making more work yourself.

this can achieved overriding the carousel 'cycle' or 'slide' methods using methods mentioned in question how extend twitter bootstrap plugin.

out of interest there reason why want show steps within item? why can't add more items make code simpler?