At Acquia, we created a Drupal Showcase site to display some of the most beautiful Drupal websites around. We wanted to highlight some of the more popular sites in a featured carousel when people visit the site. Since we wanted the site to be on Drupal Gardens, however, we couldn't install the jCarousel module, so we had to come up with our own way to have a Carousel on the site.
1. Download jCarousel Lite
We used jCarousel Lite to accomplish our carousel widget. There are many other Carousel jQuery plugins around, so feel free to explore them, but we just used jCarousel Lite as it's small and easy to use.
What you'll need to do is download jCarousel Lite, and upload it to your Drupal Gardens site. I used Media to upload the file at admin/content/media. Now that we have the jCarousel Lite JavaScript files available, we can move on to creating the View to render the carousel.
2. Create the content
In order to display a carousel, we'll first need some content to display. This content should probably have an image field associated with it so that users can scroll through the images in the carousel. Our content type is called "Showcase Submission", but you can call yours whatever you want. Once you have your content type, make sure there's an image field available for it and remember what the image field name is.
3. Create a View
Views is one of the most powerful things in the Drupal world. It allows you to make complex lists of content, display them in any way you want to, and do it all in a nice user interface. We'll create a View for our Carousel so we can display it as a block on the site.
Add a new View by clicking Structure, Views and then "Add new view" (admin/structure/views/add). I'll name mine "My First Carousel", but you can call yours whatever you want. You'll want to "Create a block", which uses an HTML list of fields. 10 carousel items seems like a good amount, but you can have as many as you want.
4. Configure the View
The View we are creating will display a list of images, and we'll have jCarousel Lite come along and carousel-ize the list. We now have to set up our View so that it displays this list of images.
For the Fields on this View, remove the Content: Title and add your image field. Make sure to link the image to the content so that the user can click on the images when they are displayed in the carousel. Don't have a label for it.
In the Header section, we'll have our previous arrow to push the carousel left. So, for the Header, add a Global: Text area with the following Raw HTML:
<img src="http://www.gmarwaha.com/image/imageNavLeft.gif" class="carouselprev" />
In the Footer section, we'll have our forward arrow to push the carousel right. So, for the Footer, add a Global: Text area, add a Global: Text area with the following Raw HTML:
<img src="http://www.gmarwaha.com/image/imageNavRight.gif" class="carouselnext" />
You'll probably want to host those images on your site using the Media interface, or even use your own images. The important part is that you remember "carouselprev" and "carouselnext" classes.
We don't want a Pager in our carousel, so just have it "Display a specified number of items".
5. Place the Carousel
Now that we have our View configured as a Block, we must put it on the site somewhere. Visit the Blocks administration at admin/structure/block and look for "View: My First Carousel". Drag the block up into the region you would like it to appear, maybe in the Precontent bottom region for example. Save the configuration and visit your homepage.
Uhh, that's not right at all. What we need is some CSS to spice it up.
6. Carousel the Carousel
What we need to do now is to apply our jCarousel Lite JavaScript to the block so that it Carousel-izes it. Hover over the gear of the block and click Edit view to bring you back to the Views administration. We’ll need some JavaScript to apply the carousel to our content. Add a new Footer Global: Text Raw html, as it’s time to get into some code...
<script type="text/javascript" src="<a href="http://www.gmarwaha.com/jquery/jcarousellite/js/jquery.jcarousellite.min.js">http://www.gmarwaha.com/jquery/jcarousellite/js/jquery.jcarousellite.min.js</a>"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(“#block-views-my-first-carousel-block .item-list”).jCarouselLite({
btnNext: ".carouselnext",
btnPrev: ".carouselprev"
});
});
</script>
Remember how we uploaded jCarousel Lite to our site using the Media interface? Well, you’ll probably want to replace the remote jquery.jarousellite.min.js with your own. Also, “#block-views-my-first-carousel-block” is probably different in your situation if you named your View different than “My First Carousel”.
7. Prettify the Carousel
Once saved, visit the homepage again to test out our new Carousel. Edit the View again, and add a new Global: Text area Raw html with the following code:
<style type=”text/css”>
.view-my-first-carousel .view-header, .view-my-first-carousel .view-content, .view-my-first-carousel .view-footer {
float: left;
}
.view-my-first-carousel .view-footer, .view-my-first-carousel .view-header {
cursor: pointer;
}
</style>
Again, ".view-my-first-carousel" will change if you named the View differently from "My First Carousel", but if you get everything right, you'll end up with a Carousel!
8. Make it your own!
As you can see, this carousel actually isn't as pretty as it could be. Kevin O'Leary helped with our design, but this is your chance to customize yours as much as you want. Tap into those CSS skills of yours, change the previous/next buttons, modify the width of the carousel to match your site's design, stick borders around the images, be creative! A featured carousel will be the first thing people see on your site, so make it pretty, make it personal, and have fun!
