javascript - Keeping a bootstrap carousel as a static background with text on top - Stack Overflow

admin管理员组

文章数量:1398831

So I'm trying to implement something like this:

Where there is text with a carousel as a background. currently when I scroll through my carousel the text scrolls as well. Here's the carousel code I'm working with.

HTML:

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            <h1>Text that I would like to stay</h1>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

CSS:

    html,
    body {
        height: 100%;

    }

    .carousel,
    .item,
    .active {
        height: 100%;

    }

    .carousel-inner {
        height: 100%;
    }


    .carousel-caption {
        padding-bottom: 475px;

    }

    /* Background images are set within the HTML using inline CSS, not here */

    .fill {
        width: 100%;
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        opacity: 0.9;
        top: 50px
    }

    footer {
        margin: 50px 0;
    }
body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        opacity: 0.6;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

}.intro-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

So I'm trying to implement something like this:

http://bootsnipp./snippets/featured/carousel-static-headline-caption

Where there is text with a carousel as a background. currently when I scroll through my carousel the text scrolls as well. Here's the carousel code I'm working with.

HTML:

    <!-- Wrapper for Slides -->
    <div class="carousel-inner">
        <div class="item active">
            <!-- Set the first background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            <h1>Text that I would like to stay</h1>
            </div>
        </div>
        <div class="item">
            <!-- Set the second background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            </div>
        </div>
        <div class="item">
            <!-- Set the third background image using inline CSS below. -->
            <div class="fill" style="background-image:url('image');"></div>
            <div class="carousel-caption">
            </div>
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>

</header>

CSS:

    html,
    body {
        height: 100%;

    }

    .carousel,
    .item,
    .active {
        height: 100%;

    }

    .carousel-inner {
        height: 100%;
    }


    .carousel-caption {
        padding-bottom: 475px;

    }

    /* Background images are set within the HTML using inline CSS, not here */

    .fill {
        width: 100%;
        height: 100%;
        background-position: center;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        opacity: 0.9;
        top: 50px
    }

    footer {
        margin: 50px 0;
    }
body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        opacity: 0.6;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }

}.intro-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

• javascript
• jquery
• html
• css
• twitter-bootstrap

Share Follow asked May 21, 2015 at 8:31 user3550821user3550821 11511 gold badge33 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Although the link in the question provides a nice solution if we want a fixed text and also scrolling text at the same time, in most cases we only need either fixed or scrolling. Making the text fixed in Bootstrap is as simple as taking the <div class="carousel-caption"> outside the <div class="item"> and placing it directly under the <div class="carousel-inner">. No need for any additional CSS or HTML. Example:

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="//netdna.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://placehold.it/1200x500/3498db/2980b9" alt="First slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x500/9b59b6/8e44ad" alt="Second slide">
    </div>
    <div class="item">
      <img src="http://placehold.it/1200x500/34495e/2c3e50" alt="Third slide">
    </div>
    <div class="carousel-caption">
      <h3>Static Headline And Content</h3>
      <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
    </div>
  </div>
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

The carousel is designed so we place scrolling content inside <div class="item"> and fixed content directly inside <div class="carousel-inner">. We can provide both, but they will overlap each other and we need additional CSS to move them apart. But most cases don't need both at the same time.

Your HTML should be something like this

HTML

<div class="col-md-12">
    <div data-ride="carousel" class="carousel slide" id="carousel-example-generic">
        <ol class="carousel-indicators">
            <li class="" data-slide-to="0" data-target="#carousel-example-generic"></li>
            <li data-slide-to="1" data-target="#carousel-example-generic" class="active"></li>
            <li data-slide-to="2" data-target="#carousel-example-generic" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item">
                <img alt="First slide" src="http://placehold.it/1200x500/3498db/2980b9">
                <div class="carousel-caption">
                    <h3>
                                First slide</h3>
                    <p>
                        Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="item active">
                <img alt="Second slide" src="http://placehold.it/1200x500/9b59b6/8e44ad">
                <div class="carousel-caption">
                    <h3>
                                Second slide</h3>
                    <p>
                        Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
            <div class="item">
                <img alt="Third slide" src="http://placehold.it/1200x500/34495e/2c3e50">
                <div class="carousel-caption">
                    <h3>
                                Third slide</h3>
                    <p>
                        Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </div>
            </div>
        </div>
        <a data-slide="prev" href="#carousel-example-generic" class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span></a><a data-slide="next" href="#carousel-example-generic" class="right carousel-control"><span class="glyphicon glyphicon-chevron-right">
                        </span></a>
    </div>
    <div class="main-text hidden-xs">
        <div class="col-md-12 text-center">
            <h1>
                        Static Headline And Content</h1>
            <h3>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    </h3>
            <div class="">
                <a href="http://www.jquery2dotnet./" class="btn btn-clear btn-sm btn-min-block">Login</a><a href="http://www.jquery2dotnet./" class="btn btn-clear btn-sm btn-min-block">Registration</a></div>
        </div>
    </div>
</div>

CSS code For main content

CSS

.main-text {
    color: #fff;
    position: absolute;
    top: 50px;
    width: 96.6667%;
}

All you have to do is add this html after the carousel code

<div class="main-text">
    <div class="col-md-12 text-center">
        <h1>
            Static Headline And Content</h1>
        <h3>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </h3>
        <div class="">
            <a class="btn btn-clear btn-sm btn-min-block" href="http://www.jquery2dotnet./">Login</a><a class="btn btn-clear btn-sm btn-min-block"
            href="http://www.jquery2dotnet./">Registration</a></div>
    </div>
</div>

An add this css

.main-text {
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}

(Demo)

本文标签： javascriptKeeping a bootstrap carousel as a static background with text on topStack Overflow