0

Twitter Bootstrap 2 カルーセルの拡張を 検討中 - jcarousel のように一度に一連のサムネイルを表示する

カルーセルをループして、最後まで停止しないようにしたいと思います。オン/オフのオプションは素晴らしいので、ストックとして、またはループをアクティブにして使用できます.

これを実装する方法はわかりませんが、jcarousel のこのスニップは bootstarp carousel と結び付けられており、項目を 1 つずつスクロールできます。

ありがとう。

$(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;
      }
    }); 
  }); 
});
4

1 に答える 1