为什么不用Bootstrap Carousel Sliders工作

时间:2018-06-04 11:07:33

标签: html html5 twitter-bootstrap-3

当我运行我的旋转木马时,图像会在五秒钟后自动旋转,但是当我点击右侧和左侧滑块时它不会滑动,当我向下滚动点击指示器时屏幕只是向上和向下滚动就没有任何反应,任何建议。

我的代码是:     

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

            <!--To Create Indicators-->

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

            <!-- Wrapper For Slides-->

            <div class="carousel-inner">
                <div class="item active">
                    <img src="Images/Chilli.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Dough.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/jars.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
                <div class="item">
                    <img src="Images/Breakfast.jpg">
                    <div class="carousel-caption">
                        <h3>A Title</h3>
                        <p>A Caption</p>
                    </div>
                </div>
            </div>

            <!-- Left and Right Sliders-->

            <a class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"><span class="sr-only">PREVIOUS</span></a>
            <a class="right carousel-control" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
                <span class="sr-only">NEXT</span></a>
        </div>

谢谢, 杰夫

3 个答案:

答案 0 :(得分:0)

从其他幻灯片中移除class="active" 但首先,您应该通过,所以基本上应该阅读

 <li class="active" data-target="#home-carousel" data-slide-to="0"></li>
                <li  data-target="#home-carousel" data-slide-to="1"></li>
                <li data-target="#home-carousel" data-slide-to="2"></li>
                <li  data-target="#home-carousel" data-slide-to="3"></li>

答案 1 :(得分:0)

也许你忘了链接jQuery和bootstrap库 Fiddle

仅使用一个li激活

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

答案 2 :(得分:0)

所以,我自己的轮播按钮正常工作,我可以看到你的代码和我的代码之间存在一些明显的差异(如下)。我将按钮引回到旋转木马,我已经定义了一个&#34;按钮&#34;。希望有所帮助。

class FakeCacheModule extends AbstractModule {
    override def configure(): Unit = {
        bind(classOf[AsyncCacheApi]).annotatedWith(new NamedCacheImpl("X")).toInstance(new FakeCache)
        bind(classOf[AsyncCacheApi]).toInstance(new FakeCache)
        bind(classOf[AsyncCacheApi]).annotatedWith(new NamedCacheImpl("Y")).toInstance(new FakeCache)
  }
}