Adding swipe to jCarousel

After using jCarousel in a project, and then testing it on mobile platforms, I’ve realized that you can’t swipe through the items and this should be the expected behavior for touch devices.

The solution is to add another nice plugin that allows you to use touch events, called jQuery Touchwipe. The code should look something like this:

$('#carousel').jcarousel({
  scroll: 1;
});

$('#carousel').touchwipe({
  wipeLeft: function() {
    $('#carousel').jcarousel('next');
  },
  wipeRight: function() {
    $('#carousel').jcarousel('prev');
  },
  min_move_x: 20,
  min_move_y: 20,
  preventDefaultEvents: false
});

The preventDefaultEvents option is set “true” on the plugin page example, but it prevents you to swipe up/down for usual scroll, so if you have to scroll down or up the page where the carousel is, you can set the option to “false”.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s