幻灯片类未在旋转木马中找到Bootstrap 3 [英] slide class not found in carousel in Twitter Bootstrap 3

问题描述

我在twitter bootstrap 3中做一个旋转木马，但是当我使用类carousel幻灯片，那么它给错误未知的类幻灯片。下面我使用的代码。请指导我。

 < div class =container> 
< div id =theCarouselclass =carousel slidedata-ride =carousel> 
< div class =carousel-inner> 
< div class =item active> 
< img src =/ images / carousel-1.jpgalt =1class =img-responsive/> 
< / div> 
< div class =item> 
< img src =/ images / carousel-2.jpgalt =2class =img-responsive/> 
< / div> 
< div class =item> 
< img src =/ images / carousel-3.jpgalt =3class =img-responsive/> 
< / div> 
< div class =item> 
< img src =/ images / CG-carousel-4.jpgalt =4class =img-responsive/> 
< / div> 
< / div> 
< / div> 
< / div> 
  

解决方案

您的代码是正确的..
我的系统这个代码工作正常。

在Bootstrap 3..But没有类slide的定义。没有幻灯片类，旋转木马图像将随着

  
 < script> 
 $（document）.ready（function（）{
 $（'carousel'）。carousel（）; 
}）; 
< / script> 
  

检查Bootstrap CSS& JS参考你的代码..
并检查参考文件的顺序

你可以按照这个顺序： - / p>

1. bootstrap.css


2. bootstrap-theme.css


3. jquery-1.9.1.js


4. bootstrap.js

脚本块不会使用JQ库...正确添加JQ库文件。

并确保JQ文件在脚本工作之前加载。为了您可以添加引用在页面顶部

I am making an carousel in twitter bootstrap 3 but when i use the class "carousel slide" then it gives error unknown class slide. below the code which i am using. kindly guide me.

<div class="container">
    <div id="theCarousel" class="carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="/images/carousel-1.jpg" alt="1" class="img-responsive"/>
            </div>
            <div class="item">
                <img src="/images/carousel-2.jpg" alt="2" class="img-responsive"/>
            </div>
            <div class="item">
                <img src="/images/carousel-3.jpg" alt="3" class="img-responsive"/>
            </div>
            <div class="item">
                <img src="/images/CG-carousel-4.jpg" alt="4" class="img-responsive"/>
            </div>
        </div>
    </div>
</div>

解决方案

Your Code is Correct.. In my system this code working fine..

There is no definition for class "slide" in Bootstrap 3..But without "Slide" class ,carousel images will change with out any animation effect..

Add this script in you code

<script>
    $(document).ready(function () {
        $('.carousel').carousel();
    });
</script>

Check the Bootstrap CSS & JS Reference in you code.. and also check the order of the Reference files

You can follow this order:-

1. bootstrap.css
2. bootstrap-theme.css
3. jquery-1.9.1.js
4. bootstrap.js

The script block will not work with out JQ Library..So add JQ Library file correctly ..

And Ensure that the JQ file loaded before the script working..For that you can add the reference at the top of your page

这篇关于幻灯片类未在旋转木马中找到Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！