Make jcarousel responsive

Unfortunately responsive carousels are quite challenging (though not impossible). We implemented a responsive jCarousel on http://www.grammy.com that you can look at.

The example on the Grammy's website is exactly what I'm looking for as well. To my eye, it looks like CSS changes for each breakpoint, but looks tricky. Some tips on achieving this effect easier would be helpful.

Looks like you can do it with the .3 code https://github.com/jsor/jcarousel/issues/365

I have a responsive layout here in my sandbox http://drupal.org/sandbox/Hydra/1593264
It rewrites a bit of css and makes advantage of the adaptive_images module.

There are several possible meanings of a responsive carousel, including:

• The dimensions of carousel items or images or text are reduced at lower screen sizes, possibly at specific break points and possibly with image substitution.
• At small screen widths a horizontal carousel becomes vertical.
• The number of items shown in the carousel and the number of items that the carousel scrolls by reflect the available width.

I worked on just the third of these meanings in the attached patch. With it, carousels adjust so that on load and when the page is resized the number of items in the carousel changes to fit the new width.

Specifically:

• Adds a configuration option to the views plugin providing a "Responsive" checkbox with the following description: 'Select this option to have the carousel automatically adjust the number of visible items and the number of items to scroll at a time based on the available width. Changing this option will override the "Visible" and "Scroll" options and set carousel orientation to horizontal
• If responsive is checked, the width of the carousel adjusts on load and on window resize to fit a whole number of items.

It's a partial step but probably useful enough to address on its own. Other types of responsiveness could be handled in separate patches.

New patch with minor improvements to increase flexibility: don't assume the class name added by views; include outer width in calculating the difference between the clip and container, in case the clip has margin or border width.

Until such a time as this is accepted and hits stable, I implemented a version of the patch in the Debut Media feature, #1813678: Make media carousel responsive. See the commit, http://drupalcode.org/project/debut_media.git/commit/7f6e8c3, for an example of how to implement this in a custom module.

patch #8 does not update the carousel navigation

Drupal.jcarousel.reloadCallback = function(carousel) {
  // Set the clip and container to auto width so that they will fill
  // the available space.
  carousel.container.css('width', 'auto');
  carousel.clip.css('width', 'auto');
  var clipWidth = carousel.clip.width();
  var containerExtra = carousel.container.width() - carousel.clip.outerWidth(true);
  // Determine the width of an item.
  var itemWidth = carousel.list.find('li').first().outerWidth(true);
  var numItems = Math.floor(carousel.clip.width() / itemWidth) || 1;
  // Set the new scroll number.
  carousel.options.scroll = numItems;
  var newClipWidth = numItems * itemWidth;
  var newContainerWidth = newClipWidth + containerExtra;
  // Resize the clip and container.
  carousel.clip.width(newClipWidth);
  carousel.container.width(newContainerWidth);

  // Update the carousel navigation
  var selector = $(carousel.options.selector);
  $('.jcarousel-navigation', selector.parent().parent()).remove();
  carousel.pageSize = numItems;
  carousel.pageCount =  Math.ceil(carousel.options.size / carousel.pageSize);
  Drupal.jcarousel.addNavigation(carousel, carousel.options.navigation);
};

this code worked for me but is rather a hack than a solution
could you please help me to find better way to update the carousel pager on window resize

Perhaps there's something to be gained from the below project?

http://drupal.org/project/views_slideshow_liquidcarousel

@lisa.lite: yes, navigation isn't a feature I've used and I'd overlooked the need to handle it on resize. Thanks for posting your code--it's a good start. Maybe what we want here is a Drupal.jcarousel.removeNavigation method that can be called from the reload callback before adding the navigation again.

@bcobin: I looked at the liquid carousel project but decided against using it as the library doesn't look to be actively maintained and the library and module lack a lot of features that jcarousel has.

Works great. It would be good if the responsive check was exportable for ctools and features.

For anyone who wants ctools export to work for the responsive check you just need to add :

$options['responsive'] = array('default' => 0);

at line 18 of jcarousel_style_plugin.inc.

I personally don't use jCarousel any more. I've used Flexslider on all my recent projects. Though the Flexslider module has a different set of problems, the Flexslider library itself is quite a bit better than jCarousel. Anyone interested in taking over this project can contact me and I can give you commit access.

Hi quicksketch. This is slightly off topic but since you mentioned Flexslider I hope nobody minds: I'd be interested to hear how you use Flexslider as an alternative to jCarousel. Do you use the Flexslider module or do you use the plugin directly? I tried the module and it works great as a slideshow showing one image at a time, but I couldn't see any way to configure it as a carousel of multiple images like jCarousel.

The Views Slideshow module has gotten really good, and although Flexslider doesn't integrate very nicely with it using Flexslider + Views Slideshow is an effective tool for carousels. This combo approach is how we made all the carousels on http://www.grammy.com, both single-item rotators and multiple item rotators.

I tried out the new 0.3.0 version of jCarousel yesterday to see how it compares. It's sort of responsive in that it can chop off items as the window gets smaller (similar to the Liquid Carousel suggested in #11), but it's still not as good as Flexslider, which has the ability to actually resize as the window gets smaller in addition to cropping.

Hello lisa,

Where we need to place above code?

Please let me know and thnaks in advance

Re-rolled patch from #8 to work with features.

Doesn't seem to set the width to auto, seems to be stuck at 1000px

Hello,
I have added this patch and it worked great however I am wondering if there is a way to retain the full width I have set in my css and not have the next and prev images moved over the images until it goes to responsive viewing. This patch also removed the padding I had between the images. It also ignores my scroll of two items and now scrolls all five while in full view mode.

I need the responsive functionality but I would like to retain the look of the before image attached unless viewed on a device etc.

Thanks,
Paul

Great patch! thank you!

It appears the person who wrote jcarousel now supports responsive.
http://sorgalla.com/jcarousel/examples/responsive/

#19 tested working.

responsive working along with new checkbox in views.

#19, rafaqz, Thank you very much! This was exactly what i needed, works perfectly!

Thank, This patch works for me.

The patch from #19 has been included in the 7.x-2.7 release. Thanks!

hi, i have a problem with Jcarousel it's not responsive in mobile device view. Is there anyone who know what problem might be?
I am using drupal 8.