How+to+install+and+set-up+a+slick+JCarousel+slideshow

= **How to install and set-up a slick JCarousel slideshow** =
 * By Nouh Amar **



JCarousel allows you to populate and navigate images in a fancy carousel-style slideshow. It is very lightweight, yet still very customizable and flexible to fulfill many of your presentation needs.

If you're trying to think of ways to spaz up your landing page, a JCarousel is a great way to do it. Let's get started!

**Modules Required**
First, you'll need to make sure that you have the following modules installed and enabled.

> > >  > >
 * 1) **CTools** - @http://drupal.org/project/ctools
 * 1) **Views** - @http://drupal.org/project/views
 * 1) **JCarousel** - @http://drupal.org/project/jcarousel

**Create the Images**
After you have the required modules ready to go, you'll need to create images to populate into the slideshow.



Go to **Structure** >> **Content Types**, then be sure to have a content type that contains an image field (you may use the Article content type, if you wish).



Next, go to **Content** and click ‘//Add content//’, and create a handful of new images using that content type.



**Creating the View**
Go to **Structure** >> **Views**, and choose '//Add new view//.' In the **Create a block** portion, selected 'JCarousel' for the **Display format**, then click '//Continue and exit//.'





In the settings of this new block, ensure that:
 * the **Title** is 'JCarousel'
 * the **Format** is 'JCarousel' with 'Fields' chosen as the **Show** option
 * 'Content: Title' AND 'Content: Image' are added to the **Fields** section
 * in the **Filer Criteria**, 'Content: Published (Yes)' and 'Content: Type (= Article)' are present



Next, click '//Save//' to create the view.

**Positioning the Block**


Go to **Structure** >> **Blocks**, and position the new view wherever you wish on your site. When the view is positioned, it should like something like this:



**Modifying the Style**


As you can see above, the thumbnails of the carousel are only 100x100 pixels. If you want to have different sizes, you'll need to modify the JCarousel CSS. The CSS file can be found at **modules/jcarousel/skins/default/jcarousel-default.css**, under the **.jcarousel-skin-default .jcarousel-item** ruleset.

//And there you have it: a fancy JCarousel slideshow!//