CODEWITHSUNDEEP
jquerytwitter-bootstrap
pcs
pcs

Reputation: 1854

bootstrap slider images are not displayed

Here is the code,

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

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background-image:url(http://s23.postimg.org/9nq4ybppn/home_slider1.jpg one);"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url(http://s23.postimg.org/su3c1i67f/home_slider2.jpg two);"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background-image:url(http://s23.postimg.org/v17kpfbhn/home_slider3.jpg three);"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>
 </header>

I m using bootstrap, but it is not working.. images are not displayed..

May i know what i am missing..?

Thanks.

Upvotes: 2

Views: 435

Answers (2)

Thijs
Thijs

Reputation: 3055

Via data attributes

Use data attributes to easily control the position of the carousel. data-slide accepts the keywords prev or next, which alters the slide position relative to its current position. Alternatively, use data-slide-to to pass a raw slide index to the carousel data-slide-to="2", which shifts the slide position to a particular index beginning with 0.

The data-ride="carousel" attribute is used to mark a carousel as animating starting at page load. It cannot be used in combination with (redundant and unnecessary) explicit JavaScript initialization of the same carousel.

My guess is that you have to add the data-ride="carousel" to the carousel.

Edit: I've also noticed the example on the Bootstrap website uses a slightly different html:

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="..." alt="...">
        <div class="carousel-caption">
            ...
        </div>
    </div>
    <div class="item">
        <img src="..." alt="...">
        <div class="carousel-caption">
            ...
        </div>
    </div>
    ...
</div>

Upvotes: 0

Hafizur Rahman
Hafizur Rahman

Reputation: 11

You Can Use this Code, maybe its works good.

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

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <div class="fill" style="background: url(http://s23.postimg.org/9nq4ybppn/home_slider1.jpg) no-repeat center center;background-size: 100%;min-height: 500px; "></div>

                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background: url(http://s23.postimg.org/su3c1i67f/home_slider2.jpg) no-repeat center center;background-size: 100%;min-height: 500px; "></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <div class="fill" style="background: url(http://s23.postimg.org/v17kpfbhn/home_slider3.jpg) no-repeat center center;background-size: 100%;min-height: 500px; "></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </div>
            </div>
        </div>
    </header>

Upvotes: 1

Related Questions