Display number of images in carousel

Finally I got it working. Here is the dev site where I used the code:
http://osansoft.com/lilotfruits/

Here are the code changes:
– under [your_site]/wp-content/themes/customizr/inc/css/[style_that_you_use].css
add:

.carousel-navigation  {
  top: 425px;
  left: 525px;
  position: absolute;
  z-index: 999;
  width: 230px;
}

.carousel-selection  {
  background: url('circle_grey.png') no-repeat;
  width: 32px;
  height: 32px;
  display: block;
  float: left;
}

.active {
  background: url('circle_blue.png') no-repeat;
}

– add in the same folder circle_grey.png and circle_blue.png. I got mine from: http://findicons.com/

– under under [your_site]/wp-content/themes/customizr/parts/class-header-slider.php
add:

<?php
                  $count = 1;
                  $path = get_stylesheet_directory_uri();
                  foreach ( $slides as $s) {
                    $slide_object   = get_post( $s);
                    if (!isset ( $slide_object)) {
                      continue;
                    }
                    if ($count == 1) {
                      $html = "<a id=\"$count\" href=\"#customizr-slider\" data-slide-to=\"$count\" class=\"carousel-selection active\"></a>";
                    } else {
                      $html = "<a id=\"$count\" href=\"#customizr-slider\" data-slide-to=\"$count\" class=\"carousel-selection\"></a>";
                    }
                    echo $html;
                    $count ++;
                  }
                ?>
              </div>

right after <div class="carousel-navigation">
Also add:

//click on button
                $('.carousel-navigation > a').click(function(){
                  var item = Number($(this).attr('id'));
                  $('#customizr-slider').carousel(item - 1);
                  $('.carousel-navigation .active').removeClass('active');
                  var item = $('#customizr-slider .item.active').index();
                  $('.carousel-navigation a:eq('+ item + ')').addClass('active');
                  return false;
                });

                //change image on next/prev - before animation
                $('#customizr-slider').bind('slid', function() {
                  $('.carousel-navigation .active').removeClass('active');
                  var idx = $('#customizr-slider .item.active').index();
                  $('.carousel-navigation a:eq(' + idx + ')').addClass('active');
                });

right after: $( '#customizr-slider' ).carousel(<?php echo $delay; ?>);

I have not tested the code with more than 5 slides. I think it would be a good idea to add a limit of 5 images per slide in the theme, as per recommendation from the link from my initial post.

If you find this code useful please feel free to incorporate it into the theme.

Thank you.

Alin