Question

当我在我的移动视图中时，是否有可能停止自动滑动。如果可以使用css ...也许使用mediaquery xs而不是操纵旋转木马元素......？

<div id="carousel" class="carousel slide" data-ride="carousel">

    <!-- LOGO -->
    <div class="container">
        <div class="row logo">
            <div class="col-lg-12 col-sm-8 col-xs-12"><img class="img-responsive" src="img/logo.png" alt=""/></div>
        </div>
    </div>

    <!-- POINTS -->
    <ol class="carousel-indicators hidden-xs">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
    </ol>

    <!-- SLIDEWRAPPER -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="img/headbild-1.jpg" alt="headbild1">
        </div>
        <div class="item">
            <img src="img/headbild-2.jpg" alt="headbild2">
        </div>
        <div class="item">
            <img src="img/headbild-1.jpg" alt="headbild3">
        </div>
        <div class="item">
            <img src="img/headbild-2.jpg" alt="headbild4">
        </div>
    </div>

    <!-- PREV/NEXT Controls -->
    <div class="container hidden-xs">
        <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
            <span class="previcon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control pull-right" href="#carousel" role="button" data-slide="next">
            <span class="nexticon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>

Answer 1

要在移动设备上停止自动滑动，您需要在其他媒体查询中调整旋转木马的javascript / init。

你有可能用js检查你的媒体屏幕尺寸吗？如果是的话，只需摧毁你的旋转木马（如$('#carousel').destroy();）并在没有自动滑动的情况下重新启动。

停止Bootstrap Carousel自动滑动移动视图，无需javascript

1 个答案: