Bootstrap Carousel Captions

Question

I am using a Bootstrap carousel as page background in a one page website with parallax effects.

It works well except for one problem. The caption shows in the parallax part of the page. Is there any way to make the caption disappear once you scroll down the page?

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- 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" role="listbox">
                <div class="item active">
                    <img src="images/Image-1.jpg" alt="Image 1">
                    <div class="carousel-caption">
                        <h3>Caption 1 goes here </h3>
                    </div>
                </div>

                <div class="item">
                    <img src="images/Image-2.jpg" alt="Image 2">
                    <div class="carousel-caption">
                        <h3>Caption 2 goes here </h3>
                    </div>
                </div>

                <div class="item">
                    <img src="images/Image-3.jpg" alt="Image 3">
                    <div class="carousel-caption">
                        <h3>Caption 3 goes here</h3>
                    </div>
                </div>

            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


.carousel{
    height:700px;
}

.carousel .item {
 position:fixed;
 left:0 !important;
width: 100%; 
height:100%;
}

    .carousel-inner img{
    width: 100%; /* Set width to 100% */
  margin: auto;
}

.carousel-caption h3 {
    font-size:xx-large;
 }

.carousel-caption {
    top: 70%; 
    bottom:auto; 
}

Please provide your code or an example that illustrates your problem. From your 3 lines of description, it's hard if not impossible to help :) — Frederik Struck-Schøning, Jan 21 '16 at 21:30

score 1 · Answer 1 · answered Jan 22 '16 at 23:37

1

If I got this right then your problem is your css.

.carousel-caption {
    top: 70%; 
    bottom:auto; 
}

Make 70% something like 40% or just 50px;

answered Jan 22 '16 at 23:37

BigDropGR

344
2
11

The carousel is working well on the first screen but what I am trying to do is to hide the caption when it is used only as the background for the parallax effect, when you scroll further down the page. I hope this explains it better. – Dina Jan 22 '16 at 23:58

Bootstrap Carousel Captions

1 Answers1