CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Pavel G.
Pavel G.

Reputation: 39

Bootstrap Carousel wont work. Maybe I'm missing something?

So I'm trying to get this carousel to run in my header, but currently it doesn't want to work at all. I can't click it, neither will it run through the slides automatically. The tags wont even respond after being clicked.

HTML:

<header>
        <div id="home-carousel" class="carousel slide header-carousel" data-ride="carousel">
            <!-- Indicators  -->
            <ol class="carousel-indicators">
                <li data-target="#home-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#home-carousel" data-slide-to="1"></li>
                <li data-target="#home-carousel" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides  -->
            <div class="carousel-inner" >
                <div class="item active">
                    <img src="images/IMG_8821_ext_opt.jpg" alt="slider-image-1">
                </div>
                <div class="item">
                    <img src="images/2V1C8599.jpg" alt="slider-image-2">
                </div>
                <div class="item">
                    <img src="images/IMG_4519_.jpg" alt="slider-image-3">
                </div>
            </div>

            <!-- Controls  -->
            <a class="left carousel-control" href="#home-carousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#home-carousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
</header>

CSS:

header { height: 80vh }
.carousel { height: 80vh; z-index: -1; }
.header-carousel .carousel-indicators { bottom: 25px; }

Is there something I'm missing?

Upvotes: 0

Views: 64

Answers (2)

cssyphus
cssyphus

Reputation: 40038

Here is some simple javascript (jQuery) code that could do the trick for you:

cnt=0;
setInterval(function(){
    $('.item').removeClass('active');
    $('.item').eq(cnt).addClass('active');
    cnt++;
    if (cnt>2) cnt=0;
},1500);

jsFiddle Demo

Upvotes: 0

Pavel G.
Pavel G.

Reputation: 39

NEVERMIND.

The script wasn't included. Something happened and I either accidentally deleted the line or thought I had included it...

Derp.

Thanks, @richerlariviere.

Upvotes: 1

Related Questions