Bootstap Carousel won't work inside div

Question

I'm building a website using Bootstrap and using Carousel at 100% height. The problem is that it works but not within another div. My Joomla system generates two div by default and so I can't avoid that. How should I resolve this issue?

DEMO with div (not working): https://jsfiddle.net/55gfw2jg/

DEMO without div (working): https://jsfiddle.net/55gfw2jg/1/

HTML:

        <div>
        <div>
        <header id="myCarousel" class="carousel slide">
        <!-- 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">
            <div class="item active">
                <!-- Set the first background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
                <div class="carousel-caption">
                    <h2>Caption 1</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the second background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
                <div class="carousel-caption">
                    <h2>Caption 2</h2>
                </div>
            </div>
            <div class="item">
                <!-- Set the third background image using inline CSS below. -->
                <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
                <div class="carousel-caption">
                    <h2>Caption 3</h2>
                </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>
    </div>
    </div>

CSS:

html,
body {
    height: 100%;
}

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

.carousel-inner {
    height: 100%;
}

/* 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;
}

JS:

$('.carousel').carousel({
    interval: 5000 //changes the speed
})

The code works if I remove the two "div" before and after <header>. How do I make it work? I cannot do away with the two div as it is generated by Joomla.

div has no width or height you need to give them a width:100%; and height:100%; — Bosc, Jun 12 '16 at 00:12

score 1 · Answer 1 · answered Jun 12 '16 at 00:24

The issue is the two outter div's have no height and so your carousel is being given a height of 100% based off of a height of 0.

Giving div a height of 100% could lead to issue with other divs, so if you have no control over those two outter divs and they are always appearing at the very top of your code you can use some jquery to add a class to the first div and the first div inside of that, then assign the height to those classes.

jquery

$( "div" ).first().addClass( "outter" );
$( "div div" ).first().addClass( "inner" );

css

.outter, .inner{
      height: 100%;
}

see fiddle https://jsfiddle.net/x07q5o6z/

score 0 · Accepted Answer · answered Jun 12 '16 at 00:14

0

The problem is height of extra divs added: Here is working fiddle with both your divs- https://jsfiddle.net/55gfw2jg/3/

I added:

div{
  height:100%;
}

answered Jun 12 '16 at 00:14

Don

1,334
1
10
18

Bootstap Carousel won't work inside div

2 Answers2