jCarousel неправильно рассчитывает ширину с более новой версией jQuery 1.10.2

0

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

Я предполагаю, что новая версия добавляет неправильное дополнение к post-контейнеру.

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>
  • 0
    Когда я в последний раз работал с jCarousel и обновленной версией jQuery (около 6 месяцев назад, если память не изменялась), мне пришлось редактировать исходный код jCarousel, чтобы он был совместим с jQuery. - Требуется проверка ошибок JS и пошаговое выполнение процедур отладки и обновления.
  • 0
    ту же проблему я обнаружил .. stackoverflow.com/questions/25972878/…
Теги:
jquery-1.10
jquery-1.7

2 ответа

0

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

из

carousel_item.width( child_size );

в

carousel_item.width( child_size - 25 );
0

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню