CODEWITHSUNDEEP
twitter-bootstrap
Arie
Arie

Reputation: 3563

Jumbotron images slider

hui guys, i have my jumbotron and full background image placed in it. I was thinking to myself whether is it possible to make it not only one static image but to make some slides contains of e.g 5 pictures which could slides every hmm 5 sec? Is it possible? How could it implement what i mentioned? My current implementation below:

html:

 <div class="jumbotron">
            <div class="container">
            </div>
            </div>

and css for it:

.jumbotron {
    position: relative;
    background: #000 url('35.jpg') center center no-repeat;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    height: 370px;
}

problem with second galery slider after implementing the top one:

<!-- Gallery -->
    <div class="container">
        <section>
            <div class="page-header" id="gallery">
                <h2>Kilka wykonanych projektów.<small> Couple of already realased projects.</small></h2>
            </div>

            <div class="carousel slide" id="screenshot-carousel" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#screenshot-carousel" data-slide-to="0" class="active"></li>
                    <li data-target="#screenshot-carousel" data-slide-to="1"></li>
                    <li data-target="#screenshot-carousel" data-slide-to="2"></li>
                    <li data-target="#screenshot-carousel" data-slide-to="3"></li>
                </ol>
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="highway.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>Highway heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="river.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>River heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="street.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>Street heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="painting.jpg" alt="Text of the image">
                        <div class="carousel-caption">
                            <h3>Painting heading</h3>
                            <p>This is the caption</p>
                        </div>
                    </div>

                </div><!-- End Carousel inner -->
                <a href="#screenshot-carousel" class="left carousel-control" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                </a>
                <a href="#screenshot-carousel" class="right carousel-control" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                </a>
            </div><!-- End Carousel -->

        </section>
    </div>

this is how it looks after image is changing:

enter image description here

Upvotes: 1

Views: 11854

Answers (2)

Sirjan Sharma
Sirjan Sharma

Reputation: 79

For a reference with carousel with jumbotron, you can check my practice page!. It has readable code if you inspect it.

whole slider is not on all width you have put it inside a container div. Just close the container div and reopen it inside the jumbotron (This is optional. You can use it without container too. Or use container-fluid in place of container to cover the full width)

Upvotes: 1

ifma
ifma

Reputation: 3818

See this bootply code for a demo on how to customize a jumbotron inside a carousel: http://www.bootply.com/61935

The basic gist is to place the jumbotron inside the divs for the container of the carousel, so u have the properties of the jumbotron being cycled as in a carousel.

Upvotes: 2

Related Questions