How to: showMultiple (value), changeBy 1 base on window width?

[claudchan]

Hi guys!

I would like to ask if anythingSlider can do such thing.
I have a slider item size of 320px X 150px with setting option showMultiple (value) & changeBy: 1
I like my slider to auto show more items in a row/slide by detect the browser width.
But I don't know how.

IF browser width is more or equal to 320, I want my slider to showMultiple: 1 & changeBy: 1
IF browser width is more or equal to 640, I want my slider to showMultiple: 2 & changeBy: 1
IF browser width is more or equal to 960, I want my slider to showMultiple: 3 & changeBy: 1

[Mottie]

This is possible, but I've been so busy lately that I haven't had a chance to make a demo for you. I will work on something later tonight.

[Mottie]

Hi sorry it took me so long to respond. Here is the demo, the the code:

var multi, w, timer, slider = $('#slider'),
    win = $(window),
    checkWidth = function() {
        multi = 3;
        w = win.width();
        if (w >= 640 && w < 960) {
            multi = 2;
        } else if (w < 640) {
            multi = 1;
        }
        // update AnythingSlider
        slider.data('AnythingSlider').options.showMultiple = multi;
        slider.anythingSlider();

        // show width for demo
        $('#size').text('width = ' + w + '; multi = ' + multi);
    };

win.resize(function() {
    clearTimeout(timer);
    // throttle the resize check
    timer = setTimeout(function() {
        checkWidth();
    }, 200);
});

slider.anythingSlider({
    // Set this value to a number and it will show that many slides at once
    showMultiple: multi,
    // Amount to go forward or back when changing panels.
    changeBy: 1
});​

[Mottie]

I'm guessing this is no longer a problem, so I'm closing this issue. Please feel free to reopen it if you still have questions. Thanks!