Question

我刚刚将jQuery更新到最后一个，突然间我看到了破碎的jCarousel。有人可以指出我在错误/改变的方向上找到正确的方向，因为我花了好几个小时试图让它工作但仍然没有成功。

我的猜测是较新的版本正在向容器后添加错误的填充。

Bellow是我在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 );

jCarousel没有使用更新的jQuery版本1.10.2正确计算宽度

2 个答案: