为什么我不能在模态窗口中使用滑动图片

时间:2015-07-15 11:48:55

标签: html css twitter-bootstrap

我有一个按钮,当我点击他时我创建了打开模态窗口。在模态窗口我创建了旋转木马滑块,我有问题在左右旋转雪佛龙,那不工作,在我的计算机图像上滑动5秒,但在jsfiddle滑动不工作,你能告诉我在雪佛龙滑动有什么问题左和右。 在我的大项目中,我有2个滑块,当我在模态窗口中单击雪佛龙时,我的页面向下滚动

的jsfiddle http://jsfiddle.net/3kgbG/802/

HTML

  <button class="btn btn-lg btn-block" data-toggle="modal" data-target=".bs-example-modal-lg">CLICK HERE</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
       <divclass="carousel slide" data-ride="carousel">
                    <div class="carousel-inner">
                        <div class="item active">
                            <img src="http://cdn.banquenationale.ca/cdnbnc/2013/06/ruisseau.jpg">
                        </div>

                        <div class="item">
                           <img src="http://pixdaus.com/files/items/pics/4/68/127468_81126581de22e05a9a66d3216ae2b4ad_large.jpg">
                        </div>

                        <div class="item">
                            <img src="http://www.naturehighlights.com/images/25.1_Canada.jpg">
                        </div>
                    </div>

                    <a class="left carousel-control" href="#locations" data-slide="prev">
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                    <a class="right carousel-control" href="#locations" data-slide="next">
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>

                </div>
        </div>
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

您忘记了Carousel的ID,并且您将class属性与div标签混合。

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

Updated Fiddle link

<a class="left carousel-control" data-target="#locations" data-slide="prev">
     &lsaquo;
     <span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" data-target="#locations" data-slide="next">
     &rsaquo;
     <span class="glyphicon glyphicon-chevron-right"></span>
</a>