2013-07-10 2 views
0

Twitter Bootstrap 2 carousel - display a set of thumbnails at a time like jcarousel부트 스트랩 jcarousel, itme 랩에 의해 아이템/루프

내가 LOOP에 회전 목마를 싶습니다 확장하고 마지막에 도달하면 중지 할 수 있습니다. 켜기/끄기 옵션이 좋으므로 스톡이나 루프 활성으로 사용할 수 있습니다.

이것을 구현하는 방법을 잘 모르지만 jcarousel의이 스 니펫은 bootstarp 회전 장치로 연결되어 항목을 하나씩 스크롤하도록합니다.

감사합니다.

$(function() { 
var _next, _prev; 
_next = $.fn.carousel.Constructor.prototype.next; 
_prev = $.fn.carousel.Constructor.prototype.prev; 
$.fn.carousel.Constructor.prototype.next = function() { 
this.$element.trigger('pln.next'); 
return _next.call(this); 
}; 
$.fn.carousel.Constructor.prototype.prev = function() { 
this.$element.trigger('pln.prev'); 
return _prev.call(this); 
}; 
$('div.carousel.jcarousel').each(function() {; 
    $(this).swiperight(function() { 
    $("#myCarousel").carousel('prev'); 
}); 
$(this).swipeleft(function() { 
    $("#myCarousel").carousel('next'); 
}); 

    var item_width, stop_pos, total_items, total_width, visible_items, visible_width, _carousel, _slider; 
    _carousel = $(this); 
    total_items = _carousel.find('li').length; 
    item_width = _carousel.find('li:first').outerWidth(true); 
    total_width = item_width * total_items; 
    _carousel.find('.item:first').width(total_width); // lets shrink the actual  container to it's real size 
    visible_items = Math.round(_carousel.find('.carousel-inner').width()/item_width); 
    visible_width = visible_items * item_width; 
    stop_pos = visible_width - total_width; 
    _slider = _carousel.find('.item:first'); 
    _slider.data('to', 0); 
_carousel.carousel('pause').on({ 
     'pln.prev': function() { 
     if (_slider.position().left < 0 && _slider.position().left === _slider.data('to')) { 
      _slider.data('to', _slider.position().left + item_width); 
      _slider.animate({ 
      left: "+=" + item_width + "px" 
      }, 'fast'); // lets move the slider 
     } 
     return false; 
     }, 
     'pln.next': function() { 
     if (_slider.position().left > stop_pos && _slider.position().left === _slider.data('to')) { 
      _slider.data('to', _slider.position().left - item_width); 
      _slider.animate({ 
      left: "-=" + item_width + "px" 
      }, 'fast'); 
     } 
     return false; 
     } 
    }); 
    }); 
}); 

답변

0

캔트 그냥 jCarousel 구성에

wrap: 'circular' 

를 사용할 수 있습니까?