Using the carousel in a responsive design.

[lspoor]

I've taken a method so I can use this in a responsive design using this code;

jQuery(document).ready(function($) { var $postcarousel = $('#post-carousel');

    if( $postcarousel.length ) {

        var scrollCount;

        if( $(window).width() < 480 ) {
            scrollCount = 1;
        } else if( $(window).width() < 768 ) {
            scrollCount = 2;
        } else if( $(window).width() < 960 ) {
            scrollCount = 3;
        } else {
            scrollCount = 4;
        }

        $postcarousel.jcarousel({
            animation : 600,
            scroll    : scrollCount
        });
    }

});

As you can see it is told a scroll count depending on the window size.

I've created a little video to display my problem. In desktop view you'll see 4 different parts. You'll then see me resize the browser, at this size 3 parts should be shown but it just jumps to a new line. BUT If I reload the page only 3 are shown which is what I need. How can I get this to work in a 'live' mode?

Video link - http://www.screenr.com/1aW8

Thanks in advanced.

[jsor]

Not sure what it has to do with the scrollCount. It seems its rather a css problem not resizing the outer container correctly. Could you setup a HTML example and post the url where i can see this?

[lspoor]

I sent an email to you as I wish not to share the lin, thanks :)

[domangsu]

I am working on a similar goal, but want the scrollCount to be dependent on the number of visible items.

My problem is: How can I get the number of the last "fully visible" item?

Here the code and a sample page: http://dl.dropbox.com/u/76056850/web/index.html

function mycarousel_itemLastInCallback(carousel, item, idx, state) { var visibleItems= carousel.last - carousel.first + 1; carousel.options.scroll = visibleItems };

[jsor]

The problem is, that the width and margis of the <li> elements change. Since jCarousel sets the width for th <ul>, the items don't fit into it anymore.

The approach i'm using for responsive carousel is:

jQuery(document).ready(function($) {
    var $postcarousel = $('#post-carousel');

        if( $postcarousel.length ) {

            var itemWidth = 240;

            $postcarousel.jcarousel({
                animation : 600,
                setupCallback: function(carousel) {
                    carousel.reload();
                },
                reloadCallback: function(carousel) {
                    var num = Math.floor(carousel.clipping() / itemWidth);
                    carousel.options.scroll = num;
                    carousel.options.visible = num;
                }
            });
        }
});

Some notes:

• The approach uses the visibleoptions (see docs)
• You have to define a fixed width itemWidth
• Math.floor() causes "stretched" items sometimes. Alternatively you can try Math.round() and a min-width for the <li>s in your css

[lspoor]

Hey jsor, i'm quite new to jquery; I got some help off a friend for what code I used, could you explain further with you post? On how I could get mine working. Could I simply not set the specific width I need for each UL in my media queries?

[jsor]

The 0.2.x versions are a bit unflexible for this use case. You could try the new (not yet released) 0.3 from the master branch. In the new version, jCarouse doesn't set the width of he <ul>anymore (its simply set to 20000em via css). Note, that 0.3 and 0.2 are not compatible.

[lspoor]

I can't seem to find 0.3. Could you link me to it? Thank you :)

[lspoor]

I think I have it all working now. I was wondering if you could assist me in adding touch swipe gestures to this now? For use on iPhones/iPads?

[jsor]

Simply use a touch swipe plugin (eg. http://labs.skinkers.com/touchSwipe/ or http://www.netcu.de/jquery-touchwipe-iphone-ipad-library) and combine it with jCarousel. Something like

$postcarousel
    .touchwipe({
        wipeLeft: function() {
            $postcarousel.jcarousel('scroll', '+=1');
        },
        wipeRight: function() {
            $postcarousel.jcarousel('scroll', '-=1');
        }
    });

[lspoor]

Thanks!

I'm trying this but it isn't working. Any ideas?

function carousel() { var $carousel = $('.blog-carousel');

    if( $carousel.length ) {

        var scrollCount;

        if( $(window).width() < 480 ) {
            scrollCount = 1;
        } else if( $(window).width() < 768 ) {
            scrollCount = 2;
        } else if( $(window).width() < 960 ) {
            scrollCount = 3;
        } else {
            scrollCount = 4;
        }

        $carousel.jcarousel({
            animation : 500,
            easing    : 'easeOutCubic',
            scroll    : scrollCount
        })();
    }

    $carousel
        .touchwipe({
            wipeLeft: function() {
                $carousel.jcarousel('scroll', '+=1');
            },
            wipeRight: function() {
                $carousel.jcarousel('scroll', '-=1');
            }
        });
}
carousel();

[jsor]

What exactly isn't working? Any errors in Firebug?

 $carousel.jcarousel({
        animation : 500,
        easing    : 'easeOutCubic',
        scroll    : scrollCount
    })();

Remove the last 2 parenthesis here. And why do you have the touchwipe code outside the if statement?

[lspoor]

Okay, here's what I'm using now;

function carousel() { var $carousel = $('.blog-carousel');

    if( $carousel.length ) {

        var scrollCount;

        if( $(window).width() < 480 ) {
            scrollCount = 1;
        } else if( $(window).width() < 768 ) {
            scrollCount = 2;
        } else if( $(window).width() < 960 ) {
            scrollCount = 3;
        } else {
            scrollCount = 4;
        }

        $carousel.jcarousel({
            animation : 500,
            easing    : 'easeOutCubic',
            scroll    : scrollCount
        });

        $carousel
        .touchwipe({
            wipeLeft: function() {
                $carousel.jcarousel('scroll', '+=1');
            },
            wipeRight: function() {
                $carousel.jcarousel('scroll', '-=1');
            }
        });
    }
}
carousel();

It still isn't working on my iPhone. I'm not too sure how to check in Firefox but heres some errors in the console from Chrome.

http://cl.ly/3f0P2m1Q0C3B1z3g2O1k

[jsor]

Where do you use it? The link you sent me doesn't have this code.

[lspoor]

I posted the code I'm using and the link is to an image of the errors I receive in the Console.

[jsor]

I need the full setup and, please, not copied in the issue body ;)

[lspoor]

I'd be happy to send you the link to the entire site if I could send via email? (I'd rather not share the link - personal reasons ) :)

[jsor]

Sure.

[jsor]

I get

Uncaught TypeError: Object [object Object] has no method 'jPlayer'
Uncaught TypeError: Object [object Object] has no method 'isotope'

Obviously there are 2 plugins missing.

[lspoor]

I dont see why they're there as the Isotope and jPlayer elements are working absolutely fine. Can you determine the problem with touchswipe?

[jsor]

Check which plugins are included, i don't see them.

[lspoor]

I believe its because I have a custom.js which is linked to on the homepage but which also contains the calling for isotope and jplayer but these are not needed on the homepage. These shouldnt affect touchswipe should they?

[jsor]

Ha, i mixed 0.3 code in here ;) Correct for 0.2.8:

$carousel
    .touchwipe({
        wipeLeft: function() {
            $carousel.jcarousel('next');
        },
        wipeRight: function() {
            $carousel.jcarousel('prev');
        }
    });

[lspoor]

EXCELLENT! Thank you so much :D

[MobsterGit]

I too have been trying to get jcarousel to work in a responsive environment. Has anyone come up with an actual solution for this? I'm finding jcarousel very un-flexible and the need to write custom css for each media query.