Bootstrap image carousel

elcou96 · July 5, 2016

In a website I am creating, I need an image-carousel. I tried the default bootstrap carousel, with some adjustments (I need the captions and indicators underneath the image).

I want the carousel to have a set max-height (depending on the device).

However, when scaling the page or viewing on a mobile device, different-sized images tend to make the captions and indicators jump aroud as seen in the following images:

-> ->

Is there any way to fix this? Or am I forced to use images of a fixed size?

Current HTML:


<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img class="first-slide img-responsive center-block" src="images/sample.jpg" alt="First slide">
            <div class="container">
                <div class="carousel-caption">
                    <p>
                        <a href="#"><h2>The Lunchbox</h2></a>
                        <h6>8/01 - 20u</h6>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="second-slide img-responsive center-block" src="images/sample2.png" alt="Second slide">
            <div class="container">
                <div class="carousel-caption">
                    <p>
                        <a href="#"><h2>The Lunchbox</h2></a>
                        <h6>8/01 - 20u</h6>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="third-slide img-responsive center-block" src="images/sample.jpg" alt="Third slide">
            <div class="container">
                <div class="carousel-caption">
                    <p>
                        <a href="#"><h2>The Lunchbox</h2></a>
                        <h6>8/01 - 20u</h6>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div><!-- /.carousel -->

Current CSS;


    .carousel-inner > .item > .img-responsive {
        width: auto;
        max-height: 500px;
    }
    .carousel-inner {
        margin-bottom: 50px;
    }
    .carousel-indicators {
    }
    .carousel-indicators li {
        border: solid 2px;
        border-radius: 50%;
        border-color: #36393A;
    }
    .carousel-indicators .active {
        width: 10px;
        height: 10px;
        margin: 1px;
        background-color: #36393A;
    }
    .carousel-caption {
        bottom: 30px;
        position: relative;
        left: auto;
        right: auto;
        color: #36393A;
        text-shadow: 0 0 0;
    }

    .carousel-caption a {
        left: auto;
        right: auto;
        color: #36393A;
        text-shadow: 0 0 0;
    }

    .carousel-caption h2 {
        position: relative;
        margin-bottom: -8px;
        font-family: 'Open Sans', sans-serif;
        font-size: 16pt;
        font-weight: bold;
        left: auto;
        right: auto;
        color: #36393A;
        text-shadow: 0 0 0;
    }

    .carousel-caption h6 {
        position: relative;
        margin-bottom: -5px;
        font-family: 'Open Sans', sans-serif;
        font-size: 10pt;
        font-weight: bold;
        left: auto;
        right: auto;
        color: #36393A;
        text-shadow: 0 0 0;
    }

elcou96 · July 5, 2016

nvm found a way:

The solution I used:

I put the image as the background of a div with a fixed heigth and made sure the image was positioned correctly.

new html:


<!-- Carousel
================================================== -->
<div id="carousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="carousel_image" style="background: url(images/lunchbox.jpg) no-repeat"></div>
            <!--<img class="first-slide img-responsive center-block" src="images/sample.jpg" alt="First slide">-->
            <div class="container">
                <div class="carousel-caption">
                    <p>
                        <a href="#"><h2>The Lunchbox</h2></a>
                        <h6>8/01 - 20u</h6>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel_image" style="background: url(images/lunchbox.jpg) no-repeat"></div>
            <!--<img class="second-slide img-responsive center-block" src="images/sample2.png" alt="Second slide">-->
            <div class="container">
                <div class="carousel-caption">
                    <p>
                        <a href="#"><h2>The Lunchbox</h2></a>
                        <h6>8/01 - 20u</h6>
                    </p>
                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel_image" style="background: url(images/lunchbox.jpg) no-repeat"></div>
            <!--<img class="third-slide img-responsive center-block" src="images/sample.jpg" alt="Third slide">-->
            <div class="container">
                <div class="carousel-caption">
                    <p>
                        <a href="#"><h2>The Lunchbox</h2></a>
                        <h6>8/01 - 20u</h6>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div><!-- /.carousel -->

Using @media, I made a different style for small devices.

added this to my css:


    .carousel .carousel_image {
        background-size: contain !important;
        width: 100%;
        height: 400px;
        background-position: center !important;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    
    @media (max-width:499px){
        .carousel .carousel_image {
            background-size:contain !important;
            background-position: center !important;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            width: 100%;
            height: 200px;
        }
    }

The solution isn't 100% as I wanted, but it works