Vertical scrolling problem

[farinspace]

I'd like to do the following (4x1): http://codepen.io/farinspace/pen/GFnyg

But without the .group container for each set of 4, as my layout will be responsive and the container will change size and the number of elements within. The following doesn't work as expected: http://codepen.io/farinspace/pen/CuiKa

Can you recommend a solution?

[jsor]

I fear that this isn't possible with jCarousel without regrouing the items inside the .group containers on window.resize.

[farinspace]

My current solution uses a combination of debounce (at_begin and at_end), jQuery's wrapping functions, and Response:

// wrap elements into chunks
$.fn.extend({
    wrapChunks: function(wrappingElement, count) {
        if (undefined == count) {
            return this.wrapAll(wrappingElement);
        }
        for(var i=0; i < this.length; i+=count) {
            this.slice(i, i+count).wrapAll(wrappingElement);
        }
        return this;
    }
});

and the carousel, setup, note the unwrap which will only unwrap if grouped:

var carousel = $('.jcarousel');
var items = $('.item', carousel);
function groupItems() {
    $('.group .item', carousel).unwrap();
    if (Response.band(992)) {
        items.wrapChunks('<div class="group"></div>', 4);
    } else if (Response.band(768)) {
        items.wrapChunks('<div class="group"></div>', 3);
    } else if (Response.band(480)) {
        items.wrapChunks('<div class="group"></div>', 2);
    }
}
groupItems(); // init
$(window).resize($.debounce(500, function(e){
    groupItems();
    carousel.jcarousel('reload');
}));
// at_begin = true, unwrap while resizing
$(window).resize($.debounce(500, true, function(e){
    $('.group .item', carousel).unwrap();
}));
carousel.jcarousel({
    vertical: true,
    wrap:'circular'
});
$('.prev').jcarouselControl({
    target: "-=1"
});
$('.next').jcarouselControl({
    target: "+=1"
});

I know vertical mode isn't too popular or flexible, but the above solution works pretty well, performance-wise it can be better.

[jsor]

Yes, that's the best solution i can think of.