jCarousel not calculating width properly with newer jQuery version 1.10.2

Question

I have just updated my jQuery to the last one and suddenly I saw the broken jCarousel. Can somebody point me to the right direction on what is wrong/changed because I spent hours trying to make it work and still no success.

My guess is that the newer version is adding a wrong padding to post-container.

Bellow is my code working on jQuery 1.7.2

    jQuery(document).ready(function(){

    var carousel_container = jQuery('.carousel-container');

    function carousel_init(){
        carousel_container.each(function(){
            var carousel = jQuery(this);
            var carousel_holder = carousel.children('.carousel-item-holder');
            var carousel_item = carousel.find('.carousel-item');

            carousel_item.css('float', 'left');

            var child_size;
            if( carousel_item.filter(':first').hasClass('three') ){
                carousel_holder.attr('data-num', 4);
                child_size = carousel.parents('.row').width() / 4;
            }else if( carousel_item.filter(':first').hasClass('four') ){
                carousel_holder.attr('data-num', 3);
                child_size = carousel.parents('.row').width() / 3;
            }else if( carousel_item.filter(':first').hasClass('six') ){
                carousel_holder.attr('data-num', 2);
                child_size = carousel.parents('.row').width() / 2;
            }

            if( jQuery(window).width() <= '767' ){
                carousel_holder.attr('data-num', 1);
                child_size = carousel_item.width() + 15; //carousel.parents('.row').width();
            }

            child_size += 9;

            carousel_item.width( child_size );

            carousel_holder.attr('data-width', child_size);
            carousel_holder.attr('data-max', carousel_item.length);
            carousel_holder.width( carousel_item.length * child_size );

            var cur_index = parseInt(carousel_holder.attr('data-index'));
            carousel_holder.css({ 'margin-left': -(cur_index * child_size + 12.5) });
        });
    }

    // bind the navigation
    var carousel_nav = carousel_container.children('.carousel-navigation');
    carousel_nav.children('.carousel-prev').click(function(){
        var carousel_holder = jQuery(this).parent('.carousel-navigation').siblings('.carousel-item-holder');
        var cur_index = parseInt(carousel_holder.attr('data-index'));

        if( cur_index > 0 ){ cur_index--;  }

        carousel_holder.attr('data-index', cur_index);
        carousel_holder.animate({ 'margin-left': -(cur_index * parseInt(carousel_holder.attr('data-width')) + 12.5) });
    });
    carousel_nav.children('.carousel-next').click(function(){
        var carousel_holder = jQuery(this).parent('.carousel-navigation').siblings('.carousel-item-holder');
        var cur_index = parseInt(carousel_holder.attr('data-index'));

        if( cur_index + parseInt(carousel_holder.attr('data-num')) < parseInt(carousel_holder.attr('data-max')) ){
            cur_index++;
        }

        carousel_holder.attr('data-index', cur_index);
        carousel_holder.animate({ 'margin-left': -(cur_index * parseInt(carousel_holder.attr('data-width')) + 12.5) });
    });

    carousel_init();

    //Auto animate
    //var infiniteLoop = setInterval(function(){
    //  carousel_nav.children('.carousel-next').trigger('click');
    //}, 1000); 

    jQuery(window).resize(function(){
        carousel_init();
    });

});

and the html code

<div class="carousel-container">
  <div class="carousel-navigation">
    <a class="carousel-prev">
    </a>
    <a class="carousel-next">
    </a>
  </div>
  <div class="carousel-item-holder row" data-index="0">
    <div class="four column carousel-item">
      <a href="#">
        <img src="http://placehold.it/300x250" alt="">
      </a>

      <div class="post-container">
        <h2 class="post-title">
          Create a Flexible Folded Paper Effect Using CSS3 Features
        </h2>
        <div class="post-content">
          <p>
            Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non
          </p>
        </div>
      </div>

      <div class="post-meta">
        <span class="comments">
          <a href="#">
            24
          </a>
        </span>
        <span class="date">
          <a href="#">
            13 Jan 2013
          </a>
        </span>
      </div>
    </div>
    <div class="four column carousel-item">
      <a href="#">
        <img src="http://placehold.it/300x250" alt="">
      </a>

      <div class="post-container">
        <h2 class="post-title">
          Create a Flexible Folded Paper Effect Using CSS3 Features
        </h2>
        <div class="post-content">
          <p>
            Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non
          </p>
        </div>
      </div>

      <div class="post-meta">
        <span class="comments">
          <a href="#">
            24
          </a>
        </span>
        <span class="date">
          <a href="#">
            13 Jan 2013
          </a>
        </span>
      </div>
    </div>

Answer 1

I'd suggest checking your code against the changes of the versions later than 1.7.2 that you used. A good start is here: http://jquery.com/upgrade-guide/1.9/

Answer 2

After checking for differences in jquery I still couldn't find the difference in code but ended doing the following:

from

carousel_item.width( child_size );

to

carousel_item.width( child_size - 25 );