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.

IndieRok · Accepted Answer

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:


    

        
        

            
              
               
                Headline
                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. Bootstrap 3 - Carousel Collection
              
            


             
              
               
                Headline
                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. Bootstrap 3 - Carousel Collection
              
            


            
              
               
                Headline
                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. Bootstrap 3 - Carousel Collection
              
            


            
              
               
                Headline
                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.
              
            


            
              
               
                Headline
                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.
              
            


            
              
               
                Headline
                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.
              
            


        



        
          AboutLorem ipsum dolor sit
          ProjectsLorem ipsum dolor sit
          PortfolioLorem ipsum dolor sit
          ServicesLorem ipsum dolor sit
          ServicesLorem ipsum dolor sit
          ServicesLorem ipsum dolor sit

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 + '%'
        });
}

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

Answers (1)

Related Questions