javascript - Reset Bootstrap 3 Carousel on page load - Stack Overflow

admin管理员组

文章数量:1429124

Has anybody ever run into Bootstrap's carousel not resetting on page load. It seems to be acting weird in Safari on both the desktop and iPads.

On desktops, the slide/tab you leave on is still active if you press the back button and return to the previous page.

On iPads, the slide/tab you leave on is no longer marked as active when you press the back button to return. This is really the larger problem here.

Is there a way to force data-slide-to='1' to always be active on page load.

$('.carousel.graph').carousel({
    pause: true,
    interval: false
});
$(window).on('load', function () {
    var initial = $('table.picker td').attr('data-slide-to', 0);
    initial.addClass('active');
});

This did not work.

EDIT

Here's my HTML as well...

<div id="carousel" class="carousel slide graph" data-ride="carousel">
    <table class="carousel-indicators picker">
        <tr>
            <td class="active" data-target="#carousel" data-slide-to="0">
                <div><span>Slide 1</span></div>
            </td>
            <td class="" data-target="#carousel" data-slide-to="1">
                <div><span>Slide 2</span></div>
            </td>
            <td class="blank"></td>
        </tr>
        <tr>
            <td class="" data-target="#carousel" data-slide-to="2">
                <div><span>Slide 3</span></div>
            </td>
            <td class="" data-target="#carousel" data-slide-to="3">
                <div><span>Slide 4</span></div>
            </td>
            <td class="" data-target="#carousel" data-slide-to="4">
                <div><span>Slide 5</span></div>
            </td>
        </tr>
    </table>

    <!-- Wrapper for slides -->
    <div class="carousel-inner graph">
        <div class="item active">
            <img src="/img/1.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/2.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/3.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/4.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/5.jpg" alt="" class="img-responsive" />
        </div>
    </div>
</div>

My problem is that active is not being reapplied to the TD with data-slide-to="0". I can tell because when a "picker TD" is active it has a different background color. When I press the back arrow on iPads, all the "picker TDs" have the same background color.

Has anybody ever run into Bootstrap's carousel not resetting on page load. It seems to be acting weird in Safari on both the desktop and iPads.

On desktops, the slide/tab you leave on is still active if you press the back button and return to the previous page.

On iPads, the slide/tab you leave on is no longer marked as active when you press the back button to return. This is really the larger problem here.

Is there a way to force data-slide-to='1' to always be active on page load.

$('.carousel.graph').carousel({
    pause: true,
    interval: false
});
$(window).on('load', function () {
    var initial = $('table.picker td').attr('data-slide-to', 0);
    initial.addClass('active');
});

This did not work.

EDIT

Here's my HTML as well...

<div id="carousel" class="carousel slide graph" data-ride="carousel">
    <table class="carousel-indicators picker">
        <tr>
            <td class="active" data-target="#carousel" data-slide-to="0">
                <div><span>Slide 1</span></div>
            </td>
            <td class="" data-target="#carousel" data-slide-to="1">
                <div><span>Slide 2</span></div>
            </td>
            <td class="blank"></td>
        </tr>
        <tr>
            <td class="" data-target="#carousel" data-slide-to="2">
                <div><span>Slide 3</span></div>
            </td>
            <td class="" data-target="#carousel" data-slide-to="3">
                <div><span>Slide 4</span></div>
            </td>
            <td class="" data-target="#carousel" data-slide-to="4">
                <div><span>Slide 5</span></div>
            </td>
        </tr>
    </table>

    <!-- Wrapper for slides -->
    <div class="carousel-inner graph">
        <div class="item active">
            <img src="/img/1.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/2.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/3.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/4.jpg" alt="" class="img-responsive" />
        </div>
        <div class="item">
            <img src="/img/5.jpg" alt="" class="img-responsive" />
        </div>
    </div>
</div>

My problem is that active is not being reapplied to the TD with data-slide-to="0". I can tell because when a "picker TD" is active it has a different background color. When I press the back arrow on iPads, all the "picker TDs" have the same background color.

• javascript
• jquery
• twitter-bootstrap
• safari
• mobile-safari

Share Improve this question Follow edited Jul 24, 2014 at 19:46 itsclarke asked Jul 24, 2014 at 19:35 itsclarkeitsclarke 9,00288 gold badges3636 silver badges5151 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

$('.carousel.graph').carousel({
    pause: true,
    interval: false
}).carousel(0);

.carousel(number)
Cycles the carousel to a particular frame (0 based, similar to an array).

Docs: http://getbootstrap./javascript/#carousel-usage

本文标签： javascriptReset Bootstrap 3 Carousel on page loadStack Overflow