CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3carousel
redshift
redshift

Reputation: 5237

Bootstrap 3 default Carousel: How to move indicators down and outside of slide container?

What's an easy (and clean) way to move Bootstrap 3's carousel indicators down and outside of the slide container so it's not overlayed on the photos? See image below on where I want to move the indicators.

Link to live code

enter image description here

<div class="container">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

            <div class="item">
                <img src="http://placehold.it/1170x300.jpg" alt="...">
            </div>

        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>

</div><!--//container -->

Upvotes: 42

Views: 74269

Answers (6)

Gabriel L&#243;pez Valencia
Gabriel L&#243;pez Valencia

Reputation: 83

The issue is that indicators are absolute positioned, so you could fix it by making the element ol.carousel-indicators relative positioned.

<ol class="carousel-indicators" style="position: relative;">
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="1"></li>
  <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Now indicators are part of the flow, so you should push indicators code down after div#carousel-example-generic.

Here is a working example.

<div class="container">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="margin-bottom: 3rem;">
    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item active">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>

      <div class="item">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>

      <div class="item">
        <img src="https://rotulosmatesanz.com/wp-content/uploads/2017/09/2000px-Google_G_Logo.svg_.png" alt="..." />
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

  </div>
  <!-- Indicators -->
  <ol class="carousel-indicators" style="position: relative;">
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li style="background-color: grey;" data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
</div>
<!--//container -->

I added some styling to make the change more apparent, like margin-bottom to div#carousel-example-generic, added background-color: grey to list items, and added some images from the web to get it to work.

That simple change should do the work.

The advantage of this approach versus the accepted answer, is that you don't have to guess how much margin to apply to push indicators down, because indicators are part of the flow and will move content around as needed.

Result demo, made using Bootstrap 5 (I also pushed carousel captions out of the slideshow)

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362820

You can push them below the slider like this...

.carousel-indicators {
  bottom:-50px;
}

Leave space below the carousel so that the pushed indicators don't interfere with content below the slider..

.carousel-inner {
   margin-bottom:50px;
}

Demo

Upvotes: 84

Avijit Chakraborty
Avijit Chakraborty

Reputation: 191

Customize your item class div 

 <div class="item">
     <div class="col-mid-1"> &nbsp; </div>
         <div class="col-md-10"> your content </div> 
             <!-- Note total should not be greater than 12 that is 1 + 10 + 1 = 12--> 
             <div class="col-mid-1"> &nbsp; </div>
 </div>

this worked for me when i don't want the icons on the content div

Upvotes: 0

Helbert
Helbert

Reputation: 1

You can set border to 0px like this: 

.carousel-indicators li{
  border: 0px;
}

Upvotes: -4

Themba Mabaso
Themba Mabaso

Reputation: 411

you can simply add the bootstrap class hidden after the indicator class like this:

<ol class="carousel-indicators hidden">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

Upvotes: 1

Nur Rahmat Taufik Herjanto
Nur Rahmat Taufik Herjanto

Reputation: 1

You can write with:

.carousel-indicators {
  display:none;
}

Upvotes: -15

Related Questions