How to use the JCarousel Module for Drupal

tutuploadsmedia_1328037597079.png

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

tutuploadsmedia_1328037792046.png

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

tutuploadsmedia_1328037067831.png

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.

tutuploadsmedia_1328038178103.png

Click Save to complete the creation of your view.

Step 4: Place the block

tutuploadsmedia_1328037109070.png

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:

tutuploadsmedia_1328038443124.png

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:

{codecitation}.jcarousel-skin-default .jcarousel-item {
padding: 0;
width: 100px;
height: 100px;
overflow: hidden;
border: 1px solid #CCC;
list-style: none;
background: #fff none;
}
{/codecitation}

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

Instructor

  • Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Blog Rating
Subscribe
Notify of
12 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Dmitry Salnikov

Thanks for post.

Nick

You’re welcome, Dmitry! 🙂

Kind regards,

Nick

oladapo

Thank you so much, this works perfectly with ease. Also please how can i make the slides view about 7 object at a time instead of the default 4.

Query

Hi oladapo,

It seems that we can change the number of slides when we specify the *jcarousel format settings* on the views page – see “number of visible items”

Jake

Thanks a lot… Now, I got it! Have a great day!

claudine

Thanks, great tutorial and very simply explained!

janice

new to drupal, how do you edit images in Jcarousel? ie, delete existing and add new images

Roger

Many Thanks!

This tutorial was easy to follow by a newbie. Works great, all that is necessary now is to figure the skins.

sharmal

Hello Nick

do u no how to modify this jcarousel swipe??

madan

i need to style my image alone which was displaying in my jcarousel which holds title ,body, image.. what i have to give.. pls help me i am very much new to drupal

Ivaseg

madan, you can hide with CSS some blocks that you don’t want to see. For example, how to hide title and label for default horizontal skin:

.jcarousel-skin-default .jcarousel-item-horizontal .field-label, .jcarousel-skin-default .jcarousel-item-horizontal h2 {

display: none;

}

Jitu

My image is not displaying.

12
0
Would love your thoughts, please comment.x
()
x