Who love to Drupal

How to use the JCarousel Module for Drupal

Posted by drupallovers on March 30, 2012

JCarousel is a useful module for creating Drupal slideshows. It uses the JCarousel plugin from http://sorgalla.com/jcarousel/and makes it easy to use via integration with Views.

Here’s a simple example of how to use the JCarousel module.

Step 1: Install the modules

Make sure that you have these three modules installed and enabled:

Step 2: Create content with an image field


In order to show images, you will need content with images.

You can use the default “Article” content type if you wish. Go to Structure > Content types and make sure that you have a content type with an image field attached as in the image above. Then go to Add content and use that content type to create several content items with images attached.

Step 3: Create a view


Go to Structure > Views and click Add new view.

The important part of the view is “Create a block”. Choose the JCarousel Display format and then click Continue & edit.

The image below shows the settings you will need. If you followed our instructions when setting up the view, the only thing you might have to change here is the Fields. Click Add and add the Content: Image field to your view.


Click Save to complete the creation of your view.

Step 4: Place the block


Go to Structure > Blocks and place your new JCarousel block somewhere on your site.

Once the block is live, it will look like the image below:


The JCarousel project page on Drupal.org warns:

“You will almost certainly need to do custom CSS in your theme in order to use this module. The default CSS only supports 100 pixel square items. A basic understanding of CSS is therefor required to use this module.”

As you can see, the output here is 100 pixel square images.

You will need to add some CSS for JCarousel to your theme in order to change this width. The original CSS is in /sites/all/modules/jcarousel/skins/default/jcarousel-default.css

The width is being controlled by:


01..jcarousel-skin-default .jcarousel-item {
02.padding: 0;
03.width: 100px;
04.height: 100px;
05.overflow: hidden;
06.border: 1px solid #CCC;
07.list-style: none;
08.background: #fff none;


You can modify that and place it in your theme’s CSS file.


One Response to “How to use the JCarousel Module for Drupal”

  1. TINNER said

    Hey would you mind letting me know which web host you’re working with? I’ve loaded your blog in 3 different internet browsers and I must say this blog loads a lot quicker then most. Can you suggest a good web hosting provider at a reasonable price? Thank you, I appreciate it!

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

%d bloggers like this: