CODEWITHSUNDEEP
htmlbootstrap-4carousel
JAYJKB
JAYJKB

Reputation: 95

Bootstrap 4 - Carousel with fixed background

I would like to create a carousel with a fixed background. Only the text should change.

I tried to put the same background-image into every slide but I don't like the switch animation. I think it would be better if only the text would change.

My code:

<div id="myCarousel" class="carousel slide" data-ride="carousel">
            <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>
            <div class="carousel-inner">
                <div class="carousel-item active">
                <img class="first-slide" src="img/earth1.jpg" alt="First slide">
                    <div class="container">
                        <div class="carousel-caption text-left">
                            <h1>TEXT 1</h1>
                            <p id="screen"></p>
                            <p>text1</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="second-slide" src="img/earth1.jpg" alt="Second slide">
                    <div class="container">
                        <div class="carousel-caption">
                            <h1>TEXT 2</h1>
                            <p id="screen"></p>
                            <p>text2</p>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="third-slide" src="img/earth1.jpg" alt="Third slide">
                    <div class="container">
                        <div class="carousel-caption text-right">
                            <h1>TEXT 3</h1>
                            <p id="screen"></p>
                            <p>text3</p>
                        </div>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
            </a>
        </div>

What do I need to add?

Thank you, Jay

Upvotes: 0

Views: 2546

Answers (1)

Rishit Patel
Rishit Patel

Reputation: 96

you should try this: add new div above carousel item as shown below and set background image to it whatever you want, you can get same image on every slide, just style your content inside carousel item. you can also set min height to background image as shown in below code.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <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>
    <div class="carousel-inner">
        <div class="img" style="background-image: url('your image path');">
            <div class="carousel-item active">
                <img class="first-slide" src="img/earth1.jpg" alt="First slide">
                <div class="container">
                    <div class="carousel-caption text-left">
                        <h1>TEXT 1</h1>
                        <p id="screen"></p>
                        <p>text1</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img class="second-slide" src="img/earth1.jpg" alt="Second slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>TEXT 2</h1>
                        <p id="screen"></p>
                        <p>text2</p>
                    </div>
                </div>
            </div>
            <div class="carousel-item">
                <img class="third-slide" src="img/earth1.jpg" alt="Third slide">
                <div class="container">
                    <div class="carousel-caption text-right">
                        <h1>TEXT 3</h1>
                        <p id="screen"></p>
                        <p>text3</p>
                    </div>
                </div>
            </div>
        </div>    
    </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
    </a>
</div>

<style type="text/css">
    .img{
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        min-height:400px;
    }
</style>

Upvotes: 1

Related Questions