manipulating width of div when clicking on bootstrap carousel item using CSS only

Question

I have 6 items in my carousel. I want to have a progress bar underneath it which transforms along with the active item of the carousel.

I tried it like this: http://www.bootply.com/ZSAOQu7mph

I think I mixed up the CSS syntax somehwere but simply dont know what. I tried it two different ways but both seem to be wrong.

Do you have a visual example of what the carousel is suppose to look like, the design so to speak. I believe that you want to control the carousel's slides with the btn/pills and to update the progress bar after each click, am I correct? You should provide us with the entire html/relevant parts please. I'm saying this because, in it's current form in your bootply, you are missing some html tag which are default to bootstrap's carousel — IndieRok, Aug 07 '14 at 18:52
No no. The carousel itself WORKS. I just want to implement an additional progress bar that grows depending on the item selected. My carousel is based on this template: http://bootsnipp.com/snippets/featured/tabbed-slider-carousel — user3630430, Aug 07 '14 at 18:57
Ok I'll check this out and see if I can come up with a simple solution — IndieRok, Aug 07 '14 at 19:03
I got it working. Sorry for the delay, something came up and I add to put this on hold. Will post the solution in a few minutes. — IndieRok, Aug 07 '14 at 21:51

score 2 · Accepted Answer · edited May 23 '17 at 10:26

EDIT: After a little google research, here's what I found:

there are no parent selectors in CSS SOURCE 1 | SOURCE 2

By taking a look at the CSS you added in your bootply, it seems to me that this is what you are attempting. Like, if '#sol1' has the '.active' class, update '.progress' width, and so on. This cannot be done in CSS, since '.progress' is outside of '.nav-pills'. You need to use Jquery to achieve this.

I started from scratch from the LINK you gave me. Here's what I did:

I added in the html, like you did, a DIV which represents the progress bar. This bar starts a 16.66% of width since the first step is active at start. Working with percentage is better in this case as it will adapt perfectly to bootstrap, even if the page is resized.

The slider contains six slides, in other words six steps. Our progress bar will have to increase by 16.6% each time. When it will reach 100%, the slider will reset to step 1 and the progress bar will return to 16.66% and so on.

I added a bit of Css3 markup to ease the progress bar animation when it changes.

As for the javascript/jquery code, I created a simple function which will be called each time that:

The slider moves automatically (default cycle)
A nav button (steps) is pressed

The function takes only one parameter, which is an index. In order to update the progress bar, we need to add 1 to our index and multiply the result by 16.66. Except if the index is 0 than the percentage will always be 16.66.

I could optimize it a bit more but time is not on my side. Here is the BOOTPLY EXAMPLE

Html:

<div class="container">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">

        <!-- Wrapper for slides -->
        <div class="carousel-inner">

            <div class="item active">
              <img src="http://placehold.it/1200x400/cccccc/ffffff">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
              </div>
            </div><!-- End Item -->

             <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/dddddd/333333">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. <a href="http://sevenx.de/demo/bootstrap-carousel/" target="_blank" class="label label-danger">Bootstrap 3 - Carousel Collection</a></p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
              </div>
            </div><!-- End Item -->

            <div class="item">
              <img src="http://placehold.it/1200x400/999999/cccccc">
               <div class="carousel-caption">
                <h3>Headline</h3>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
              </div>
            </div><!-- End Item -->

        </div><!-- End Carousel Inner -->


        <ul class="nav nav-pills nav-justified">
          <li data-target="#myCarousel" data-slide-to="0" class="active"><a href="#">About<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="1"><a href="#">Projects<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="2"><a href="#">Portfolio<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="3"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="4"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
          <li data-target="#myCarousel" data-slide-to="5"><a href="#">Services<small>Lorem ipsum dolor sit</small></a></li>
        </ul>

    </div><!-- End Carousel -->
    <div class="my-progress-container">
        <div class="my-progress-bar">

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

Css:

body { padding-top: 20px; }
#myCarousel .nav a small {
    display:block;
}
#myCarousel .nav {
    background:#eee;
}
#myCarousel .nav a {
    border-radius:0px;
}

.my-progress-container{
    margin-top: 5px;
    background: #ebebeb;
}

.my-progress-bar{
    width:0%;
    background:#F59843;
    height: 25px;
    -webkit-transition: width 1s ease-in-out;
      -moz-transition: width 1s ease-in-out;
      -o-transition: width 1s ease-in-out;
      transition: width 1s ease-in-out;
}

Jquery code:

$(function () {

    //Global variables
    $globalVars = {
        nextIndex:0,
        currentPercent:16.66
    }

    //Initialize progress bar since we start on the first step
    $('.my-progress-bar').css({
        width: '16.66%'
    });

    $('#myCarousel').carousel({
        interval:   4000
    });

    var clickEvent = false;
    $('#myCarousel').on('click', '.nav a', function() {
            clickEvent = true;
            $('.nav li').removeClass('active');
            $(this).parent().addClass('active');
            var current = $('.nav li.active');
            var id = parseInt(current.data('slide-to'));
            //Call progress bar update function
            updateProgress(id);
    }).on('slid.bs.carousel', function(e) {
        if(!clickEvent) {
            var count = $('.nav').children().length -1;
            var current = $('.nav li.active');
            current.removeClass('active').next().addClass('active');
            var id = parseInt(current.data('slide-to'));
            //Set the next slide index
            $globalVars.nextIndex = id + 1;

            //If the next index goes out of bound, reset to 0
            if($globalVars.nextIndex == 6){
                $globalVars.nextIndex = 0;
            }

            //Call progress bar update function
            updateProgress($globalVars.nextIndex);

            if(count == id) {
                $('.nav li').first().addClass('active');    
            }
        }
        clickEvent = false;
    });
});

function updateProgress(nextIndex){
        //Check to see if we came back to the first step
        if(nextIndex == 0){
            //If true, we set our progress to 16.66%
            $globalVars.currentPercent = 16.66;
        }
        else{
            //Else we update the progress bar
            $globalVars.currentPercent = 16.66 * (nextIndex + 1);
        }

        //Update progress bar width property
        $('.my-progress-bar').css({
            width: $globalVars.currentPercent + '%'
        });
}

I guess you missed the part in the question that mentions CSS only. That being said, I don't think it can be done with CSS only and well they're using jasvascript anyway.... — Jon P, Aug 07 '14 at 22:46
That's what I thought.. althought you are right I missunderstood OP's question a bit. — IndieRok, Aug 07 '14 at 22:53
Here is a nice article about [CSS selectors](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) for your knowledge — IndieRok, Aug 08 '14 at 00:03
This is impressive... I thank you so much. I thought I can do it with CSS only, but since it is not that possible in this case, I am really grateful for helping me out like this. You saved me a lot of time. I will jup into the JS code to understand it. THANK YOU! :) — user3630430, Aug 08 '14 at 05:04
It was my pleasure! If you have any questions regarding the code, don't hesitate to ask and I'll help you — IndieRok, Aug 08 '14 at 12:54

manipulating width of div when clicking on bootstrap carousel item using CSS only

1 Answers1