GoodCarousel – A Carousel with Mootools

GoodCarousel is a plugin made with Mootools 1.2.3. It is made to slide over to, not fade to, the next slide and uses inline elements to draw data for the slide titles, descriptions and images.

GoodCarousel Demo

What it does

It creates a carousel like those found on cNet but instead of fading, it will slide over. The carousel draws its data from inline elements: h3, p and img within in a div with a specific class. This allows you to use the carousel but also keep the data indexable.

Usage

You can see a fully working demo page here. There are a few steps you’ll need to follow in order to get it to work.

1. You need to determine the space you have for your slides. The space cannot change so fluid layouts probably won’t work. The demo page uses 495×300 pixel images for slides because that is the space alloted to it by the layout. I found the space by using the layout tab in firebug.
2. When you make your images, keep in mind that the title and description text will be displayed on the left side of the image so putting in the right-top corner is probably the best bet. Experiment with it.
3. Once you have your slides, you can easily build your html structure so GoodCarousel can draw data from it.

   <div class="carousel-data">
   <h3>Slide Title</h3>
   <p><a href="http://what.the.slide.links.to/">Slide description or subtext</a></p>
   <img src="path/to/slide-image.png" title="image title" rel="rel - for lightbox support" />
   </div>
   

   Each div with carousel data will make a slide in the carousel.

4. The carousel nav is automatically sized based on options you set when initialize GoodCarousel.

   	window.addEvent("domready", function() {
   		gc = new GoodCarousel("good-carousel", {width: 495, height: 300});
   	});
   

   Make sure you set the width and height you used for your images. GoodCarousel will take of how big to make the container and how small each nav should be.

You have to include the GoodCorners javascript file and css file in the head of your page, as always.

<link rel="stylesheet" href="path/to/good-carousel.css" type="text/css" />
<script src="path/to/mootools-1.2.3.js" type="text/javascript"></script>
<script type="text/javascript" src="path/to/good-carousel.js"></script>
<script type="text/javascript">
	window.addEvent("domready", function() {
		var gc = new GoodCarousel("good-carousel", {width: 495, height: 300});
	});
</script>

Remember to set the width and height that your slides will be.

Downloads

You can pick up GoodCarousel with the stylesheet, transparent background and double arrows on the demo page as a zip. The zip contains a compressed and uncompressed version for both the css and javascript. You can use the demo page for setup reference.

Notes

You may need to edit the stylesheet that accompanies GoodCarousel. You can easily customize the height of the nav, text color, hover color and so on by editing the uncompressed good-carousel.css file.