After searching the Internet for a while and finding a few examples to play with, and even a Drupal module or two, I couldn't find a Carousel or Slider to work the way I needed it to or even work at all. Until I came across the jQuery Infinite Carousel. This is exactly what I was after as I didn't want the images to stop, or slide backwards all the way to the start again when the end was reached, and the code seemed clean and easy to integrate into Drupal.

Now, I had my slider, but as I didn't just want to throw it into Drupal and have to manually update it every time I wanted it to change, so I needed to find out how I could achieve this. With more investigating I came to the conclusion that I would need to set up a custom View, displaying a list of the thumbnails from a Custom Content Type, and then alter the output of the View to match what was needed for the jQuery Infinite Carousel. Below is a brief step by step tutorial on how to achieve this.

This tutorial is for Drupal version 5.11 (latest versions may work but have not been tested) and assumes you already have a good knowledge of Drupal.

Drupal Modules Used: Content Construction Kit (CCK), Imagefield, Imagecache, Views, jQuery Update Module (5x2.0)

Step 1. Download, install and upload the necessary files

Download, install and enable the required Drupal Modules. Open the page for the jQuery Infinite Carousel (we will refer back to it later).

Step 2. Configure Imagecache Module

Go to admin>site configuration>Image Cache and create a preset for the thumbnail you want to display in the Carousel. Example settings: Scale width: 200, Crop width: 200, height: 110, xoffset: center, yoffset: center

Step 3. Create your custom Content Type

Go to admin>content management>content types>add content type and create your desired custom content type. After creating your new content type, add a new field using the field type Image and set the settings to what you need. This is so when you add a new content type, you can upload an image that will be used as the thumbnail for the Carousel.

Step 4. Create your View

Go to admin>site building>Views>Add to create your view for the Carousel. Give your view a name, check "Provide Block", select "List View" as the View Type, and in the Nodes per Block put in how many nodes (thumbnails) you want to display in your Carousel. Under the add field section, select the image field that you added to your content type and hit the add field button. Once your field has been added, under the Options drop down select the Image Cache preset name you created for your Carousel and use the "...as link to node" (so when the thumbnail is clicked it navigates the user to the node).

Next, configure your Filters for the View. Select the Node: Type filter and set it to use your content type for this Carousel. Also for good practice I always add the Node: Published equals yes filter so it doesn't load nodes that aren't yet published.

Once that is done you can set the Sort Criteria of the View if you wish, this will control the order of the thumbnails in the view. For this example, set to Node: Total Hits.

Save your new View.

Step 5. Setup the blocks

Go to admin>site building>Blocks. Under the Disabled section should be the View Block we just setup. Set it to the site section you want to display it in and save. Next add a new block and give it a name like “Carousel Code”. This block will hold the JavaScript code for our carousel. Now open the jQuery Infinite Carousel page and click on the “View Code” link at the top of the page. This will show all the CSS, HTML, and JavaScript used for the Carousel. You can either copy the code from this page, or download the CSS, HTML, and JavaScript I have already prepared.

Now copy the JavaScript (not including the script to load the jQuery) and paste it into the new Block and change the input format to PHP Code. Save this Block and then move it to the same section as the View Block we moved before, but make sure you set the weight for the Code to be above your View Block, and save.

Step 6. Customising the output of the View

What we need to do now is modify the output of the View Block to what we need for Carousel. Looking at the HTML for the Carousel it is pretty straight forward, we have a list surrounded by a couple of divs. With the View we have already set up, we have our List already, containing exactly what we need from here onwards. All we need to do is strip out all that other unwanted divs etc and replace them with the two divs we need to surround our list.

Using the block.tpl.php template I already had for my Zen theme, all we need to do is create a new block template for the View using this as an example. Create a new tpl.php file and upload it to your themes directory and give it a name (Example: carousel.tpl.php). Within this template we will modify the output of the View so that all that will be output from the View is the "ul" ,"li", "a" and "img" tags.

Download, copy and paste this template code into your tpl.php file.

Step 7: Add the CSS and Upload image

Using the CSS supplied on the jQuery Infinite Carousel page or download it here, paste it into your CSS file that you are using for your Theme. Temporarily, you will also need to download and upload the forward and back buttons that are called in the CSS. Go to the example demo page to grab the arrow.png image or click here, and upload to your themes images folder.

Step 8: jQuery

As Drupal already is already loading its own jQuery, we do not want to include the script to load the jquery.min.js as given on the jQuery Infinite Carousel page. But after some trial and error, I found out that the Carousel didn't work with Drupals jQuery, so I installed and enable the jQuery Update Module, which then made the Carousel work.

Final Step: Add content, update your CSS and View

To get your Carousel working it needs content. Create some content for the Content Type you set up, making sure you have created a good amount to test your Carousel. Once you have added some content, at this stage, depending on how and where you configured your Carousel to display, it should be working. You should be able scroll through your thumbnails so all that is needed now is to tweak and update your CSS and View to get your Carousel working smoothly and how you need it to.

I hope that this Tutorial was helpful and you got you Carousel working. If you believe I have missed something, would like to add to this, or are having trouble, please let me know below.