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.
- 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.
- 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.
- 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.
- 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.
Possibly related posts:
Ryan, very nice carousel. I wonder if there is a way via the options to have the looping stop after the first loop, and on clicking one of the navigation tabs, versus continuous looping. Ideas?
Thanks, Chris
I think I could make an option for this pretty easily. It’s not in there by default, however.
Hi Ryan,
That would be great, say, it could be stopped after one or two cycles, so as not to give the rotating gif feel to it. If you make that option, how would I know? Can you post a change here?
Thanks a lot for your good work here.
Chris
Is there any way to use it with MooTools 1.2? For some reasons I can use only this version. I should try it myself and debug it if needed, but I’m sure you know if it makes sense. By the way it’s really great carousel, the best I found over Internet for free. I would click some ads if there were any :)
Hi Ryan,
It would be great to have option for stopping loop after one or more rotations. If you did include this, how would I know? Or apply it?
Thanks! Chris
Hi Ryan,
I was trying to implement the GoodCarousel,using mootools 1.2.4. But when i try to run the code the firebug is showing following error.
this.setOption is not a function.
I have googled this error and the solution i got is add following code to start of class declaration.
So i have changed the code to
var GoodCarousel = new Class({
Implements: [Options], ….
but i’m still getting the same error ..
Please help as this is every urgent
Ryan: I sent you an email concerning this. As soon as I get some help from the Mootools Devs working on the Mootools forge, I’ll formally introduce the new GoodCarousel but until then you can check it out on github.
Hi Ryan, your Carousel kicks ass. It is written so clearly, that it took me just few hours to customize it heavily for my purpose. With cutting graphics and coding CSS of course. Piece of damn good work. More like this :)
Hey there. I’m glad you liked the carousel. I’m curious about two things. What version did you use, the one on ifupdown.com/js/good-carousel/ or the one on github? And also, would you mind if I take at look at your customizations?
I used the first version. Are they different?
As you wrote me couple of days ago it works fine with MooTools 1.2 after replacing the only occurence of document.id.
As for my customization it’s not online yet, but I will let you know when it is. I changed HTML structure to pass content for carousel since I need to show image, price and some text about laptop to be promoted. Then I put it together with graphics and CSS and now it’s waiting for launch. BTW substitute function is really helpful the way you used it.
Okay then, that’s great. I’ve been trying to get added into the mootools forge. I’ve been having issues with that, the dev team is looking into it. In the mean time, I’ve been making slight modifications to it. I added a bunch of events so you can do other neat things. I also changed how the substitute method worked (I basically removed it because in the mootools mailing list, others laugh at that kind of element creation, despite how much more efficient it is.)
Finally you can see modified GC at http://www.primakomp.pl They only need to adjust times, because it slides too frequently, but it’s not my job anymore.
Thanks for letting me see! It looks really great.