Twitter Bootstrap Question posted in

Twitter bootstrap – Need to align bootstrap carousel and make its bullets working

I have a carousel of text that need to be aligned, also not sure how to make its bullets active.

By clicking on the demo link below you would see the bullet points are not in the middle of the page and based on size of the name and the text the distance between name and bullet get changed.

I need all of them (text,name,bullets) be in the middle of the page for any screen size.

Demo

Updated demo

.carousel-content {
    color: black;
    display: flex;
    align-items: center;
}

.name {
    color: black;
    display: block;
    font-size: 20px;
    text-align: center;
}

.mytext {
    border-left: medium none;
    font-size: 24px;
    font-weight: 200;
    line-height: 1.3em;
    margin-bottom: 10px;
    padding: 0 !important;
    text-align: center;
}

.bullets li {
    background: none repeat scroll 0 0 #ccc;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    float: none;
    height: 10px;
    width: 10px;
}

.bullets li:last-child {
    margin-right: 0;
}

.bullets li {
    border-radius: 1000px;
}
<div id="carousel-example" class="carousel slide" data-ride="carousel">
    <!-- Wrapper for slides -->
    <div class="row">
        <div class="col-xs-offset-3 col-xs-6">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="carousel-content">
                        <div>
                            <h3>#1</h3>
                            <p>This is a twitter bootstrap carousel that only uses text. There are no images in the carousel slides.</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#2</h3>
                            <p>This is another much longer item. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, sint fuga temporibus nam saepe delectus expedita vitae magnam necessitatibus dolores tempore consequatur dicta cumque repellendus eligendi ducimus placeat! Sapiente, ducimus, voluptas, mollitia voluptatibus nemo explicabo sit blanditiis laborum dolore illum fuga veniam quae expedita libero accusamus quas harum ex numquam necessitatibus provident deleniti tenetur iusto officiis recusandae corporis culpa quaerat?</p>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="carousel-content">
                        <div>
                            <h3>#3</h3>                            
                            <p>This is the third item.</p>
                        </div>
                    </div>
                </div>

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

</div>

        setCarouselHeight('#carousel-example');

        function setCarouselHeight(id) {
            var slideHeight = [];
            $(id + ' .item').each(function() {
                // add all slide heights to an array
                slideHeight.push($(this).height());
            });

            // find the tallest item
            max = Math.max.apply(null, slideHeight);

            // set the slide's height
            $(id + ' .carousel-content').each(function() {
                $(this).css('height', max + 'px');
            });
        }

UPDATE

I changed the code of bullets to the following and it causes them to move a bit to to the top. (in the middle of the text)

<div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets carousel-indicators"> 
        <li class="active" data-target="#carousel-example" data-slide-to="1"></li>
        <li class="" data-target="#carousel-example" data-slide-to="2"></li>
        <li class="" data-target="#carousel-example" data-slide-to="3"></li>
        </ol>
Tags:

8

Answers


  1. 0

    Try this rules in .bullets element:

    .bullets {
    margin: 0;
    padding: 0;
    text-align: center;
}

    Change the wrapper’s offset to 2: 

    <div class="col-xs-offset-2 col-xs-8">

    Also, reset margin and padding from ol:

    ol {
   margin: 0;
   padding: 0;
}

    Check the DEMO

    Login or Signup to reply.
  2. 0

    To make the bullet working you can just give one attribute to each list item as data-target="#myCarousexxx". It will automatically work no need of script to write.

    Add one class to bullets list UL that carousel-indicators.

    Your data-slide-number should be as data-slide-to

    Dats it buddy. No need of css it will automatically will align. Study the bootstarp.

    Demo

    Login or Signup to reply.
  3. 0 
     <div class="col-xs-offset-4 col-xs-8">
      <ol class="bullets">
        <li class="active" data-slide-number="1"></li>
        <li class="" data-slide-number="2"></li>
        <li class="" data-slide-number="3"></li>
        </ol>
  </div>

    Either offset your bullets, or move your content areas to span the whole width

    Login or Signup to reply.
  4. 0

    CSS

    .col-xs-offset-4 {
  /* margin-left: 33.33333333%; */
}
.col-xs-8 {
  /* width: 66.66666667%; */
}

    The above two causes your Div to appear at the right-side

    So to overcome those use the below CSS Code i have attacked some Selectors so it wont affect your bottstrap.css 

     .row .col-xs-offset-4 {
       margin-left: 0;
    }
    .row .col-xs-8 ,.carousel-content div{
       width:100%;
    }
.carousel-content{
    text-align:center;

}


  .bullets.carousel-indicators{
      position:initial;
       padding:0;
       margin:0;
        width:100%;
}
    1. The margin and width for the two classes have been modified by the above css.
    2. The child div inside the carousel-content was not taking the full width of it parent so we use width property for that.
    3. text-align to make the things align at the center of the Div
    4. padding & margin to remove the extra default CSS to the carousel-indicators

    DEMO

    Login or Signup to reply.
  5. 0

    Your main problem is that your markup is a bit different than the markup required by Bootstrap for its carousel. You therefore need to change the following:

    1. Your carousel-indicators ol should be nested right under the .carousel and not in the carousel-inner. This will not only solve your alignment issue for the indicators, but will also cause them to be displayed as expected (ie. the “active” indicator will be highlighted).
    2. There is no need for rows and columns in the carousel since you can align everything with text-align: center;. In fact the col-xs-offset-4 col-xs-8 is what causes your text to be misaligned since it takes up 8 columns but leaving 4 columns blank at the left side of the page.

    The updated markup therefore becomes as follows:

    <div id="carousel-example" class="carousel slide" data-ride="carousel">
    <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>
    <div class="carousel-inner">
        <div class="item active">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the first item.</p>   <span class="name">This is the first name</span>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the second item.This is the text of the second item.</p>  <span class="name">This is the second name, This is the second name</span>

                </div>
            </div>
        </div>
        <div class="item">
            <div class="carousel-content">
                <div>
                    <p class="mytext">This is the text of the third item.This is the text of the third item.This is the text of the third item.</p> <span class="name">This is the third name,This is the third name,This is the third name,</span>

                </div>
            </div>
        </div>
    </div>
</div>

    You will also notice that with this markup you will need minimal extra CSS since most of what you need to do will be taken care of by the Bootstrap CSS.

    See the updated demo.

    As a side note, according to Bootstrap you should be using the carousel-caption class for any text you need to insert in the carousel (what is now in carousel-content), since Bootstrap assumes that your carousel will also have an image for each item. Since however this is not the case for you I have kept the carousel-content class instead since the carousel-caption is not correctly aligned/displayed without a corresponding image.

    Login or Signup to reply.
  6. 0

    First of all. Change your bullets to this

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

    Javascript counts from 0

    I’ve added some css for the bullets and de slider container. And I moved the bullets to the back of the parent div.. It seems to work

    http://jsfiddle.net/gfcnqzy2/17/

    Login or Signup to reply.
  7. 0

    Just a few changes to make it all work:

    1) Zero indexing. Start data-slide-to from 0, not from 1:

    <ol class="bullets carousel-indicators"> 
    <li ... data-slide-to="0"></li>
    <li ... data-slide-to="1"></li>
    <li ... data-slide-to="2"></li>
</ol>

    2) Slides padding. Add some extra padding to slides for bullets:

    .carousel-content {
    ...
    padding: 20px 0 50px 0;
}

    3) Bullets offset. Reduce bottom bullets offset to look it better:

    .bullets {
    ...
    bottom: 10px;
}

    Demo

    Demo

    Login or Signup to reply.
  8. 0

    Use custom made carousel, here is an exmpale of something i created quickly.

    http://jsfiddle.net/gppg7k6n/

    And some jquery: 

    var cont = $('.slides'),
    slide = cont.find('.slide'),
    nav = cont.find('.nav'),
    li = null,
    len = slide.length,
    index = slide.filter('.start').index();

for (var i = 0; i < len; i++) {
    nav.append($('<li>'));
}

li = nav.find('li');

showSlide();
slide.stop().eq(index).show();

function updateLi() {
    li.removeClass('white');
    li.eq(index).addClass('white');
}

function showSlide() {
    slide.stop().fadeOut().eq(index).stop().fadeIn();
    updateLi();
}
cont.click(function () {
    index = ++index % len;
    showSlide();
});

nav.click(function (e) {
    e.stopPropagation();
});

li.click(function (e) {
    index = $(this).index();
    showSlide();
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search