jQuery旋轉木馬導航打破調整大小

Question

我做了一個帖子傳送帶，在我從SO得到的代碼的幫助下，它主要工作，但我有調整窗口的大小問題。

整個事情是這裏

https://github.com/dingo-d/Post-Excerpt-Carousel

，如果你重新加載它在某個窗口寬度它工作正常，但如果你只是調整窗口的大小，導航停止工作，因爲它應該。

現在，當你在第一篇文章中，你不能去以前（旋轉木馬不會移動），當你最後，旋轉木馬也不會前進。但如果你調整大小，他們會。發出此工作jQuery代碼是這樣的

jQuery(document).ready(function ($) { 
    'use strict'; 

    $(window).on('load', function() { 
     $('.post_excerpt_carousel').each(function(){ 
      var $this = $(this); 
      post_excerpt_positioning($this); 
     }); 
    }); 

    $(window).on('resize', function(){ 
     $('.post_excerpt_carousel').each(function(){ 
      var $this = $(this); 
      if ($(window).width()>760) { 
       $(this).find('li').css('width', '570px'); 
      } 
      post_excerpt_positioning($this); 
     }); 
    }); 

    function post_excerpt_positioning(e){ 

     var $carousel = e; 
     var outer_width = $(window).outerWidth(); 
     var container_width; 

     if (outer_width > 1190) { 
      container_width = 1170; 
     } 

     if (outer_width > 960 && outer_width < 1190) { 
      container_width = 960; 
     } 

     if (outer_width < 960) { 
      container_width = parseInt((9/10)*outer_width,10); 
     } 

     var $prev = $carousel.find('.carousel_prev'); 
     var $next = $carousel.find('.carousel_next'); 
     var duration = $carousel.data('duration'); 
     var li_number = $carousel.find('li').length; 
     var $ul = $carousel.find('ul'); 
     var $li = $ul.find('li'); 

     if (outer_width < 760){ 
      $li.css('width', container_width); 
      $li.eq(1).addClass('active'); 
      if ($li.eq(2).hasClass('active')) { 
       $li.eq(2).removeClass('active'); 
      } 
     } else if (outer_width > 760){ 
      $li.eq(1).addClass('active'); 
      $li.eq(2).addClass('active'); 
     } 

     var list_width = $carousel.find('li').outerWidth(true); 
     var left_offset; 
     if ($('.boxed_body_wrapper').length) { 
      left_offset = list_width-60; 
     } else{ 
      left_offset = parseInt(list_width - (outer_width - container_width-42)/2, 10); 
     } 

     $ul.css({'display': 'inline-block', 'width': li_number * $carousel.find('li').outerWidth(true) + 'px', 'left': -left_offset + 'px'}); 


     var not_active_no = $carousel.find('li').not('.first').not('.last').not('.active').length; 
     var not_active_width = not_active_no * $carousel.find('li').outerWidth(true); 

     $carousel.on('click', '.carousel_next', function (e) { 
      e.preventDefault(); 
      var $li = $ul.find('li'); 
      var $a = $('.active', $carousel); 

      if (!$a.next().hasClass('last') && !$ul.is(':animated')) { 
       $a.removeClass('active').next().addClass('active'); 
      } 

      if (parseInt($ul.css('left'), 10) != -parseInt(not_active_width + left_offset, 10) && !$ul.is(':animated')) { 
       $ul.animate({ 
        left: parseInt($ul.css('left'), 10) - $ul.find('li').outerWidth(true), 
       }, duration); 
      } 
     }); 

     $carousel.on('click', '.carousel_prev', function (e) { 
      e.preventDefault(); 
      var $li = $ul.find('li'); 
      var $a = $('.active', $carousel); 

      if (!$a.prev().hasClass('first') && !$ul.is(':animated')) { 
       $a.removeClass('active').prev().addClass('active'); 
      } 

      if (parseInt($ul.css('left'), 10) !== -parseInt(left_offset, 10) && !$ul.is(':animated')) { 
       $ul.animate({ 
        left: parseInt($ul.css('left'), 10) + $ul.find('li').outerWidth(true), 
       }, duration); 
      } 
     }); 
    } 

}); 

的主要問題是，當你調整你顯然改變偏移，和動畫時。第二個問題是我在調用的函數中有on.('click')事件，並且我不認爲這是一種正確的代碼編寫方式，所以任何幫助都會有所幫助。

Codepen展示它是在這裏：http://codepen.io/dingo_d/pen/doNyMw

Answer 1

好吧，我拋棄了功能，因爲功能和它裏面的on click事件代表團是一個壞主意。我還簡化了它檢查最後和第一篇文章的方式。

var $carousel = $('.post_excerpt_carousel'); 

$carousel.each(function(){ 

    var $this = $(this); 

    var outer_width = $(window).outerWidth(); 
    var container_width; 

    if (outer_width > 1145) { 
     container_width = 1170; 
    } 

    if (outer_width > 960 && outer_width < 1145) { 
     container_width = 960; 
    } 

    if (outer_width < 960) { 
     container_width = parseInt((9/10)*outer_width,10); 
    } 

    var duration = $this.data('duration'); 
    var li_number = $this.find('li').length; 
    var $ul = $this.find('ul'); 
    var $li = $ul.find('li'); 
    $li.removeClass('active'); 

    if (outer_width < 760){ 
     $li.css('width', container_width); 
     $li.eq(1).addClass('active'); 
     if ($li.eq(2).hasClass('active')) { 
      $li.eq(2).removeClass('active'); 
     } 
    } else if (outer_width > 760){ 
     $li.eq(1).addClass('active'); 
     $li.eq(2).addClass('active'); 
    } 

    var list_width = $this.find('li').outerWidth(true); 
    var left_offset; 

    left_offset = parseInt(list_width - (outer_width - container_width-42)/2, 10); 

    $ul.css({'display': 'inline-block', 'width': li_number * $this.find('li').outerWidth(true) + 'px', 'left': -left_offset + 'px'}); 


    var not_active_no = $this.find('li').not('.first').not('.last').not('.active').length; 
    var not_active_width = not_active_no * $this.find('li').outerWidth(true); 

    $this.on('click', '.carousel_next', function (e) { 
     e.preventDefault(); 

     if($this.find('li.last').prev().hasClass('active')){ 
      return; 
     } else { 
      var $a = $('.active', $this); 

      if (!$a.next().hasClass('last') && !$ul.is(':animated')) { 
       $a.removeClass('active').next().addClass('active'); 
      } 

      if (!$ul.is(':animated')) { 
       $ul.animate({ 
        left: parseInt($ul.css('left'), 10) - $ul.find('li').outerWidth(true), 
       }, duration); 
      } 
     } 

    }); 

    $this.on('click', '.carousel_prev', function (e) { 
     e.preventDefault(); 

     if($this.find('li.first').next().hasClass('active')){ 
      return; 
     } else { 
      var $a = $('.active', $this); 

      if (!$a.prev().hasClass('first') && !$ul.is(':animated')) { 
       $a.removeClass('active').prev().addClass('active'); 
      } 

      if (!$ul.is(':animated')) { 
       $ul.animate({ 
        left: parseInt($ul.css('left'), 10) + $ul.find('li').outerWidth(true), 
       }, duration); 
      } 
     } 

    }); 

}); 

現在的工作，因爲它應該:)，你可能要檢查