Question

有没有人遇到Bootstrap的轮播未在页面加载时重置。它似乎在桌面和iPad上的Safari中表现得很奇怪。

在桌面上，如果按后退按钮并返回上一页，则您保留的幻灯片/标签仍处于活动状态。

在iPad上，当您按后退按钮返回时，您保留的幻灯片/标签不再标记为有效。这确实是一个更大的问题。

是否有办法强制data-slide-to='1'始终在页面加载时处于活动状态。

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

这不起作用。

修改

这是我的HTML ......

<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>

我的问题是active未被TD重新应用于data-slide-to="0"。我可以说，因为当“选择器TD”处于活动状态时，它具有不同的背景颜色。当我在iPad上按后退箭头时，所有“选择器TD”都具有相同的背景颜色。

Answer 1

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

.carousel（number）
将轮播循环到特定的框架（基于0，类似于数组）。

文档：http://getbootstrap.com/javascript/#carousel-usage

在页面加载时重置Bootstrap 3 Carousel

1 个答案: