CODEWITHSUNDEEP
cssbootstrap-5
P. Jerome
P. Jerome

Reputation: 393

carousel with text adapt to max height

I'm trying to make an automatic carousel of my last updates (short updates), but each update have a different height, causing the page to move at each slide. How to apply max item's height to my carousel, or to all my other items ?

carousel-item not showed have an .offsetHeight of 0 so there is probably something to deal with the display property ? But acting on it does break the carousel.

Here is an example :

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="card card-body bg-project-secondary">
        <div id="carousel_news" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active" data-bs-interval="4000">
                    <div class="row">
                        <div class="col-md-6 offset-md-3">
                            <div class="project_item bg-dark ratio ratio-1x1">
                                <img class="project_item" src="NEWS_IMAGE" style="width:50%;">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <p class="clear text-light">NEWS DESCRIPTION : Lorem ipsum dolor sit amet, consectetur adipiscing
                        elit. Donec lacus diam, viverra non lobortis et, sollicitudin et mi. Fusce tempus in diam sit
                        amet cursus. Etiam et erat id nulla ornare tempor in quis neque. Vivamus aliquam mi eu eros
                        dictum egestas. Fusce lobortis est a eros luctus, ut mollis sem sagittis. Donec id nunc sed
                        tortor congue suscipit. Integer finibus lobortis eros, nec pretium tortor gravida id. Morbi sit
                        amet laoreet risus. Fusce quis felis at leo auctor pulvinar. Suspendisse sit amet maximus nisi,
                        eu tincidunt lacus. Nullam mollis posuere nulla ut imperdiet. Praesent ac eleifend diam, vel
                        imperdiet ante. Nam at purus dui. Duis nec purus risus. Vestibulum accumsan id dui quis
                        eleifend. Ut nec neque posuere, lobortis ligula id, efficitur felis.</p>
                </div>
                <div class="carousel-item active" data-bs-interval="4000">
                    <div class="row">
                        <div class="col-md-6 offset-md-3">
                            <div class="project_item bg-dark ratio ratio-1x1">
                                <img class="project_item" src="NEWS_IMAGE" style="width:50%;">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <p class="clear text-light">NEWS DESCRIPTION : Morbi mattis libero a neque efficitur dictum. Mauris
                        a arcu lacinia, congue turpis id, tristique quam. Aliquam vel odio nisi. Morbi vitae viverra
                        purus. Praesent egestas in sapien sit amet mollis. Etiam fermentum aliquam iaculis. Proin eu
                        neque magna. Morbi ullamcorper sapien eget purus viverra, et rutrum urna pulvinar. Sed id purus
                        eros.</p>
                </div>
                <div class="carousel-item active" data-bs-interval="4000">
                    <div class="row">
                        <div class="col-md-6 offset-md-3">
                            <div class="project_item bg-dark ratio ratio-1x1">
                                <img class="project_item" src="NEWS_IMAGE" style="width:50%;">
                            </div>
                        </div>
                    </div>
                    <hr>
                    <p class="clear text-light">Vivamus commodo volutpat mauris, non egestas eros interdum pretium.
                        Proin quis turpis tincidunt, maximus ipsum sit amet, vehicula ante. Quisque ac eleifend nisl, at
                        aliquam neque. Fusce quis massa at augue interdum rutrum at et arcu. Suspendisse suscipit nisl
                        pulvinar tincidunt ullamcorper. Maecenas efficitur tincidunt nulla, sit amet mattis erat
                        porttitor nec. Morbi et libero scelerisque, sagittis magna et, blandit purus. Donec ac congue
                        justo. Phasellus vitae hendrerit felis. Phasellus odio nisi, condimentum id est eget, convallis
                        ultricies felis.</p>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>

Upvotes: 0

Views: 19

Answers (0)

Related Questions