Question

我正在尝试使用bootstrap轮播（幻灯片）。我复制了代码和所有内容，但下一个按钮位于滑块之外。正在运行的代码在这里：enter link description here 如果你看到，现在右箭头（下一个按钮）在图像之外。我试图将一个带有行的div和一个带有span6或8的div但是没有用。

    <div id="myCarousel" class="carousel slide">
        <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- Carousel items -->
    <div class="row">
    <div class="span8">    
        <div class="carousel-inner">
            <div class="active item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-03.jpg"> </div>
            <div class="item"> <img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-01.jpg">       
            </div>
            <div class="item"><img src="http://twitter.github.io/bootstrap/assets/img/bootstrap-mdo-sfmoma-02.jpg"> </div>
        </div>
        <!-- Carousel nav -->
        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
        </div>
    </div><!-- span -->
    </div>    <!-- row -->

我想要的是在左边放一个图像，在每个滑动上放一个右边的段落，按下它应该显示的Next和Prv按钮。我的问题如下：

如何在图像外部（左侧和右侧）放置两个按钮？
如何将图像上的下一个按钮（右箭头）像“prev”按钮一样？
我如何通常暂停它以使其仅适用于下一次和上一次点击？谢谢

Answer 1

http://jsfiddle.net/isherwood/VCwPE/6

$('#myCarousel').carousel({
    interval: false;   
})

通过使用标准标记，按钮位置正确。您可以应用不同的左/右位置来移动它们，就像我在这个小提琴中所做的那样。
见上文。
使用interval：false

Bungus提出了一些好处（答案已被删除）。我认为你最好使用最少的标记，让你的旋转木马响应，就像Bootstrap团队想要的那样。

在bootstrap轮播上定位next和prev按钮

1 个答案: