猫头鹰轮播或响应式GRID滑块的替代滑块

Question

正在进行中 http://jsfiddle.net/k0b4d4jL/

我需要有关滑块设置的帮助以及GRID的形式，并且响应非常重要。

我现在正在使用猫头鹰旋转木马（上面的图片是psd模型）它应该看起来像一个网格并响应浏览器大小，当你按下一个箭头时可以选择下一个图像网格

$(".owl-demo").each(function () {
  var $this = $(this);

  $this.owlCarousel({
    afterUpdate: function () {
      updateSize($this);
    },
    afterInit: function () {
      updateSize($this);
    }
  });
});

function updateSize($carousel) {
  var maxHeight = 0;

  $('.owl-item', $carousel).each(function () {
    var $this = $(this);
    var $image = $this.find('img');

    //Max height
    var prevHeight = $this.height();
    var thisHeight = $this.height('auto').height();
    $this.height(prevHeight);
    maxHeight = (maxHeight > thisHeight ? maxHeight : thisHeight);

    //Set image as background
    var imageSource = $image.attr('src');
    $this.css('backgroundImage', 'url(' + imageSource + ')');
  });

  //Set equal height
  $('.owl-item', $carousel).height(maxHeight);

  $('#max-height').text(maxHeight + 'px');
}    




   <div id="demo">
    <div id="owl-demo" class="owl-demo">

        <div class="item">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
        </div>
        <div class="item">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
        </div>
        <div class="item">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
        </div>
        <div class="item">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
            <img src="" width="100%" height="100%" alt="" class="cell-img">
            <img src="http://www.debililly.com/wp-content/themes/Isabelle/images/4-3.jpg" width="100%" height="100%" alt="" class="cell-img">
        </div>
        <div class="item">
            <img src="" width="100%" height="100%" alt="" class="cell-img">

        </div>


    </div>

</div>

上面的例子 - 有点让它响应:(