CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcarousel
micha3lbrown
micha3lbrown

Reputation: 85

Carousel Bootstrap

I've been staring at this same code for about 4 hours and have tried looking watching a few different tutorials. The problem is the slider loads, with spaces for 3 slides but it only displays the first slide.

All the images load fine(verified in browser) but the carousel wont change slides.

Please help, thank you! 

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/js/bootstrap.min.js">
<!--Familiar with CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
                    <div id="creativecommons" class="carousel slide" data-ride="carousel">

                        <ol class="carousel-indicators">
                            <li data-target="#creativecommons" data-slide-to="0" class="active"> </li>
                            <li data-target="#creativecommons" data-slide-to="1" class> </li>
                            <li data-target="#creativecommons" data-slide-to="2" class> </li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <img src="assets/images/slide1.jpg" alt="beach" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="assets/images/slide2.jpg" alt="beach" class="img-responsive">
                            </div>
                            <div class="item">
                                <img src="assets/images/slide3.jpg" alt="beach" class="img-responsive">
                            </div>
                        </div>
                    </div>
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 <script src="irwtbawd/assets/js/bootstrap.min.js"></script>

Upvotes: 1

Views: 363

Answers (3)

VaderUK
VaderUK

Reputation: 1

Just in case (for the uninitiated). There is no need for Jquery, just add this to the carousel's first div: data-ride="carousel"

div id="myCarousel" class="carousel slide" data-interval="3000"  data-ride="carousel">

Upvotes: 0

Amir5000
Amir5000

Reputation: 1728

I can see a few things wrong, in the top you have <link rel="stylesheet" href="assets/js/bootstrap.min.js"> delete that since that is supposed to be for CSS not JS files and you are already calling the bootstrap JS below. The other thing I see is that the boostrap.min.js is being called from a different root folder than the rest irwtbawd/assets/ instead of like the other with just assets/ could be an issue there with not linking to your assets correctly.

-- EDIT --

Also I just noticed you have wrong HTML tags in the second and third <li> items in the carousel-indicators

change:

<li data-target="#creativecommons" data-slide-to="1" class> </li> <li data-target="#creativecommons" data-slide-to="2" class> </li>

to:

<li data-target="#creativecommons" data-slide-to="1"> </li> <li data-target="#creativecommons" data-slide-to="2"> </li>

remove the word class.

Also here is a JSFIDDLE that I just threw together and you can test it out there.

Upvotes: 1

samfch
samfch

Reputation: 11

have You try to call it using javascript?:

$('.carousel').carousel()

Upvotes: 0

Related Questions