slide class not found in carousel in Twitter Bootstrap 3

Question

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>

yes i include bootstrap.min.js files bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/js/bootstrap.min.js", "~/Scripts/js/bootstrap-carousel.js")); — Ammar, Feb 09 '14 at 17:39
It is binded when the carousel initialized. Think of it as a selector purpose only. If you want carousel to slide between images add the slide class — Gokhan Demirhan, Feb 09 '14 at 17:42
Your code is correct. When is it giving error? Did you initializs carousel ? Have a look at this: http://stackoverflow.com/questions/9985801/twitter-bootstrap-carousel-slide-doesnt-work it seems related to your problem — Gokhan Demirhan, Feb 09 '14 at 23:32

Shemeemsha R A · Accepted Answer · 2014-05-05T07:45:29.933

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:-

bootstrap.css
bootstrap-theme.css
jquery-1.9.1.js
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

Thank you! I had this issue and it was because I was including bootstrap.css after jquery. That's such an odd way to fix the issue. — carlin.scott, Aug 06 '20 at 16:50

slide class not found in carousel in Twitter Bootstrap 3

1 Answers1

Linked