Twitter Bootstrap 3轮播在Firefox中不动画

时间:2013-12-29 13:20:03

标签: jquery css twitter-bootstrap firefox

Twitter Bootstrap Carousel动画没有在Firefox中转换,但在Chrome上效果非常好。我甚至在Firefox上尝试了来自GetBoostrap official website的示例代码,但它仍然没有传输,只是快速更改而没有注意到任何影响。

从来没有从SO那里得到一份工作样本。

我的代码段

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
        <div class="item active">
            <img src="/static/img/2.png">
            <div class="carousel-caption">
                <h3 style="color:#000">First slide label </h3>
                <p style="color:#000">Nulla vitae elit libero, a pharetra augue mollis interdum</p>
            </div>
        </div>

        <div class="item ">
            <img src="/static/img/1.png">
            <div class="carousel-caption">
                <h3 style="color:#000">Second slide label </h3>
                <p style="color:#000">Nulla vitae elit libero, a pharetra augue mollis interdum</p>
            </div>
        </div>

        <div class="item ">
            <img src="/static/img/4.png">
            <div class="carousel-caption">
                <h3 style="color:#000">Third slide label </h3>
                <p style="color:#000">Nulla vitae elit libero, a pharetra augue mollis interdum</p>
            </div>
        </div>
    </div>

    <!-- Controls -->
    <span class="left carousel-control" href="#carousel-example-generic" data-slide="prev" id="left-btn" onmouseover=setCursorByID("left-btn","pointer")>
        <span class="glyphicon glyphicon-chevron-left" style="color:#999999" ></span>
    </span>

    <span class="right carousel-control" href="#carousel-example-generic" data-slide="next" id="right-btn" onmouseover=setCursorByID("right-btn","pointer")>
        <span class="glyphicon glyphicon-chevron-right" style="color:#999999" ></span>
    </span>
</div>

任何人都可以给我正确的指示吗?

1 个答案:

答案 0 :(得分:0)

Ronny Skansing的帮助后。我能够解决这个问题的常见问题。

确保您始终使用最新浏览器进行Twitter Bootstrap 3. * 轮播动画转换,以便在Mozilla FF上为您效劳。

虽然您正在寻找向后兼容性。如果您确实想要回退或优雅降级,您可以自己寻找解决方案。感谢