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

Question

This question is related to bootstrap carousel.

I want to show items one by one inside a 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 get active then show

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

I know where to insert code in bootstrap carousel plugin, but don't know how to start:

Here is the code where we can write code for my 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 {.....
}

score 1 · Accepted Answer · edited May 23 '17 at 12:03

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

This can be achieved but just overriding the the carousel 'cycle' or 'slide' methods using the methods mentioned in this question How to Extend Twitter Bootstrap Plugin.

Out of interest is there a reason why you want to show steps within an item? Why can't you just add more items it would make your code much simpler?

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

1 Answers1