jCarousel не вычисляет ширину должным образом с более новой версией jQuery 1.10.2

Question

Я только что обновил свой jQuery до последнего, и вдруг увидел разбитый jCarousel. Может ли кто-нибудь указать мне правильное направление на то, что неправильно/изменилось, потому что я потратил часы, пытаясь заставить его работать и до сих пор не добился успеха.

Мое предположение заключается в том, что новая версия добавляет неправильное заполнение в пост-контейнер.

пыльник мой код работает на 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(); 
    }); 

}); 

и HTML код

<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

Я предлагаю проверить свой код от изменений версии позже, чем 1.7.2 что вы использовали. Хороший старт здесь: http://jquery.com/upgrade-guide/1.9/

Answer 2

После проверки различий в JQuery я до сих пор не удалось найти разницу в коде, но закончилось, выполнив следующие действия:

из

carousel_item.width(child_size); 

в

carousel_item.width(child_size - 25);