jCarousel 플러그인에서 항목 제거

Question

jCarousel 플러그인 (sorgalla에서)과 관련하여 질문이 있습니다. 올바른 방법으로 항목을 제거하려면 어떻게합니까?

내가 얼마나 멀리 갔는지 알 수 있습니다. here. 몇 가지 항목을 삭제 한 다음 오른쪽으로 스크롤하면 결국 "emtpy scroll"이 표시되고 그게 내가 제거하려고하는 것입니다.

나는 remove(); CSS를 display로 변경하는 대신 jQuery 함수 : none; 그러나 그것은 물건이 있었던 곳에 이상한 하얀 빈 공간을 만든다. 400 행의 jquery.jcarousel.js를 보면 remove 함수가 표시되지만 사용법은 확실하지 않습니다.

도움을 주시면 감사하겠습니다. 감사!

Answer 1

예를 들어, jCarousel은 플러그인의 범위를 넘어서고 있기 때문에 jCarousel 자체를 업데이트하지 않습니다. 문서에서, 당신이 언급 한 remove() 메소드가 작동하는 것처럼 보입니다. 그러나 jCarousel 객체를 실제로 "올바른 작업을 수행하고"버튼, 스크롤 등을 업데이트 할 수있는 방법이 없었습니다.

jCarousel 클래스에 추가 메서드를 작성했습니다. 정확히 그. Carousel에서 첫 번째 항목을 제거하고 다음/이전 버튼이 활성화/비활성화되도록 모든 것을 다시 작성하려면 removeAndAnimate (1)를 호출하면됩니다.

또한 주목할 가치가있는 remove() 함수 jCarousel은 현재 표시되고있는 항목을 제거하지 못하도록합니다 (사용자가 클릭 한 다음 회전식 키로 이미지를 제거 할 수 있도록 허용). 예를 들어,).

removeAndAnimate (I)의 구현 :

removeAndAnimate: function(i) { 

     var e = this.get(i); 

     var d = this.dimension(e); 

     if (i < this.first) this.list.css(this.lt, $jc.intval(this.list.css(this.lt)) + d + 'px'); 

     e.remove(); 
     this.options.size--; 

     var di = this.options.visible != null ? Math.ceil(this.clipping()/this.options.visible) : null; 
     var li = this.list.children('li'); 
     var self = this; 

     if (li.size() > 0) { 
      var wh = 0, i = this.options.offset; 
      li.each(function() { 
       self.format(this, i++); 
       wh += self.dimension(this, di); 
      }); 

      this.list.css(this.wh, wh + 'px');    
     } 

     this.scroll(0,true); 
     this.buttons(); 

    } 

내가 직접 제거() 구현 한 후이를 배치하는 것이 좋습니다. jQuery를 사용하여 jCarousel 인스턴스 자체에 액세스하려면 콜백 함수 외부에서 다음을 수행하십시오.

var carousel = $("#mycarousel").data("jcarousel"); 
carousel.removeAndAnimate(1); 

그래야합니다!

Answer 2

흰색 상자에 문제가있는 부분을 발견했습니다. JCarousel 메서드 format()은 클래스 이름을 대체하지 않고 새로운 클래스를 추가합니다. 나는이 기능을 재 작성했고 나를 위해 잘 작동합니다 :

format: function(e, i) { 
     // remove all class names matches 'jcarousel-item' at the start 
     $(e)[0].className = $(e)[0].className.replace(/\bjcarousel\-item.\d-*?\b/g, ''); 
     // add new class names 
     var $e = $(e).addClass('jcarousel-item').addClass('jcarousel-item-' + i).css({ 
      'float': 'left', 
      'list-style': 'none' 
     }); 
     $e.attr('jcarouselindex', i); 
     return $e; 
} 

Answer 3

아무도 나를 위해 일하지 않기 때문에 내가 당신의 답변을 모두 결합 ..

내가 내 초기화 사용자 정의 기능에 그것을 추가

carousel.removeAndAnimate = function(i) { 
      var counter = 1;  
      var itemsHTML = new Array(); 
      var e = this.get(i); 
      children = e.parent().find("li"); 
      $(e).remove() 
      $.each(children,function(){ 
       if(counter != i) { 
        itemsHTML[counter] = $(this).removeAttr("class").removeAttr("jcarouselindex"); 
       } 
       counter++; 
      }); 
      this.size(this.options.size -1); 
      this.reset(); 
      counter = 1; 
      carousel = this; 
      $.each(itemsHTML, function(k, v){ 
       if(v != null) { 
        carousel.add(counter, v[0].innerHTML); 
        counter++; 
       } 
      }); 
      this.reload(); 
     } 

잘 작동합니다.

방금 ​​제거 된 항목으로 스크롤하는 등의 개선 사항을 추가 할 수 있습니다.

Answer 4

$.jcarousel.fn.extend({ 
    removeAndAnimate: function(index) { 

     var itemsHTML = new Array(); 
     var counter = 0; 

     // Me guardo los que quedan 
     for(i = 0; i < this.size(); i++) 
     { 
      if(i != (index - 1)) 
       itemsHTML[counter++] = $('li[jcarouselindex|="' + i + '"]').html(); 
     } 

     // Configuro uno menos y borro todo 
     this.size(this.options.size -1); 
     this.reset(); 


     // Vuelvo a cargarlos 
     counter = 0; 
     for(i = 0; i < itemsHTML.length; i++) 
     { 
      this.add(counter++, itemsHTML[i]); 
     } 

     this.reload(); 
    } 
}); 

USAGE

var carousel = jQuery('#mycarousel').data('jcarousel'); 
carousel.removeAndAnimate(1); 

Answer 5

내 다른 솔루션은 내로드 된 내용에 클래스를 추가하고 DOM에서이 클래스가없는 모든 항목을 삭제했다.carousel.reset()에 의해 "제거 된"요소는 추가 된 클래스를 체계적으로 잃게됩니다.

당신과 함께 흰색 상자를 제거 후 수있을 것입니다 :

$("li:not(.the_class)").remove(); 

그냥 carousel.add() 기능 후에를 추가합니다.

잘 작동하며 회전식 회전대에 기능을 추가 할 필요가 없습니다.

"쉬운 솔루션"이며 이전/다음 버튼을 클릭하면 흰색 상자가 표시 될 수 있습니다. 이를 제거하려면 콜백 buttonNextCallback/buttonPrevCallback에 동일한 솔루션을 적용하십시오.