jQuery Feature Carousel

This plug-in was intended to be used to display feature stories on a home page of a website, but can be used for any reason and is highly customizable. It will always display three images at the same time, with all the rest hidden behind the center image. I have detailed instructions for using the plug-in, as well as a list of all the options and some frequent questions. If you have any questions about the carousel, please post a comment below.

Features

  • Arrange div's of content in a 3-D, rotating carousel.
  • Currently supports one flanking 'feature' on either side of center feature.
  • Show clickable indicators (blips) of what feature is currently at the center.
  • Display text overlay on bottom of feature (can be included anywhere on image using CSS, and below image using an option)
  • Speed, effects, locations, and more are all changeable.
  • See in action on Rowan University's homepage.
  • Works in Chrome, FireFox, Safari, and IE6+.
  • Works with jQuery v1.3+.
  • Automatically preloads images before fireing up the carousel.

Basic & default demonstration

How to Use

In the ZIP that you downloaded, you should have all the necessary files to get the demonstration displayed above to work. Simply alter the example as you see fit. Make sure you have done the following

  • Included the jQuery library (version 1.3 minimum) and the carousel script (after jQuery) using HTML script tags in your HTML header
  • Added in the CSS for the carousel somewhere in your document header
  • Structured the HTML properly as outlined in the example
  • Initiated the carousel script like below:
<script type="text/javascript">
  $(document).ready(function () {
    $("#carousel").featureCarousel({
        // include options like this:
        // (use quotes only for string values, and no trailing comma after last option)
        // option: value,
        // option: value
    });
  });
</script>

The carousel is passed in just one argument: a Javascript object containing key/value pairs for setting options. You can see the available list of options on this page.
You should be good to go with the carousel now. Toy around with the available options and try and get it to do what you want. If you have any issues with it, check the FAQ, and then check the comments here. Maybe someone solved the problem for you.

Comments

Thanks!

Submitted by Steve (not verified) on

I am glad to have found this plugin. I just got my webpage up and running when my whole computer was corrupted. I've started a new business in the last 9 months. My excel recovery software saved me from losing all my business files and reports. Now I am just trying to get back to square one and wanted to implement this plug in on my home page. I love that I can customize it. Thanks for that! Great carousel.

hi

Submitted by nitin (not verified) on

Extraordinary accumulation. Yes, that's just what I desirable to see! Great matter here. The field and acceptance were right perfect. I opine that your perspective is colourful, its retributive symptomless intellection out and rattling extraordinary to see someone who knows how to put these thoughts pile so considerably. Great job on this. Convey you! Please visit here -

http://www.facebook.com/Emotan3 and http://www.youtube.com/em0tan

Width and Height of images

Submitted by Valentin (not verified) on

Hello,

thanks for this great plugin !! I was wondering if it was possible to see picture from different size in the slider ? Not to have them all the same width or height for exemple ?

Thank you for your time.

Active Class

Submitted by craig (not verified) on

Hi, I see the waterwheel has an active class on the main image, is there any way to apply the same variable to this one? The two 'inactive' images behind the main one are appearing the same size even if I use the Javascript variable to shrink them. I see it's been asked a few times, any ideas anyone?

Play/Pause issue

Submitted by BlueCode (not verified) on

Hi,
Nice Work... and I have just added your work to my site... The issue is with Play/Pause link. During transition period when the user clicks on pause button, it does not work or its not getting stopped.. The carousel keeps on moving. I have even tried to get the transition complete event done and after that I call the pause(). Still not yet got.. Can you kindly suggest me on this.

Thanks

Great work!!

Submitted by elbee (not verified) on

Hi,
I tried your feature carousel and it was almost perfect in terms of configuring and customizing it until the last minutes when I had to put it into test by pulling data from mysql database. I am using smarty to loop through the data I am not sure if that might be the problem but can your carousel work if I pull the images and captions from mysql database. So far I get all sorts of bugs, black dots displaying at the topleft corners of images and the animation effects are just not there. The images are actually stored in a folder all I pull from the database are captions and the image names. I will very much appreciate your advice, thank you for your great work.

Kind Regards,

elbee

Size of smaller images on side

Submitted by Cristi (not verified) on

Hi, I'm a little confused on how to change the size of the 2 images on the sides, also where to change it. Is it just in the javascript file: "jquery.featureCarousel.js"?

Please let me know. I just want to make them 20% smaller than the middle image...no 50%!

Thank you!

You can pass in the size of

Submitted by Brian on

You can pass in the size of the the small feature width and small feature height as options into the carousel when it's initalizied. See the options page: http://www.bkosborne.com/jquery-feature-carousel/options

thank you

Submitted by Julia (not verified) on

Thank you very much for the carousel, I was trying to customize the Roundabout jQuery plugin (with no success) - my carousel should use images and there was a problem with their resizing. Your plugin seems to be perfect!

carousel inside <TABLE>

Submitted by xavier (not verified) on

sorry, once more in plain txt ;-)

hi there! Thx for great stuff! I tried rewriting your demo to work with nested TABLE in it, but I've got a problem implementing it in a way that code looks like this:

code:

<div class="carousel-container">
<div id="carousel">

<table>
<tr>
<td>

<div class="carousel-feature">
<a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample1.jpg"></a>
<div class="carousel-caption">
<p>
This area is typically used to display captions associated with the images. They are set to hide and fade in on rotation.
</p>
</div>
</div>
<div class="carousel-feature">
<a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample2.jpg"></a>
<div class="carousel-caption">
<p>
The background will expand up or down to fit the caption.
</p>
</div>
</div>
<div class="carousel-feature">
<a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample3.jpg"></a>
<div class="carousel-caption">
<p>
Images can be placed here as well.
</p>
</div>
</div>
<div class="carousel-feature">
<a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample4.jpg"></a>
</div>
<div class="carousel-feature">
<a href="#"><img class="carousel-image" alt="Image Caption" src="images/sample5.jpg"></a>
<div class="carousel-caption">
<p>
The background color of the caption area can be changed using CSS. The opacity can be changed in the options, but it will also change the opacity of the text.
</p>
</div>
</div>

</td>
</tr>
</table>

</div>
</div>

Its just showing a black box. What do I need to edit to make it work?

thn in advance.

2 images in carousel

Submitted by Gino (not verified) on

Hello
congratulations for the work.
When the carousel there are only two images, after a few clicks on the arrows begin to give some display problem.
You can check this page www.vitha.it / lines.php.
Where can I do to fix the problem?

Custom html for the individual trackers

Submitted by Miquel (not verified) on

Hi, thanks for this plugin. I have a question about the individual trackers. I need to convert the numbers into thumbnails and they are so many that I'm trying to build a carousel for them. But when I try to wrap the ul that holds them with a div, they stop working. In other words, is there a way to have "

    trackers

" instead of only "

    trackers

"

Ops, i also did set the trackerIndividual:false and build my own trackers to do that...

Thanks

Hi Erin, not a dumb question

Submitted by Brian on

Hi Erin, not a dumb question :), but I don't know if anyone has made this a WordPress plugin yet. This is just a jQuery plugin, but a specific WordPress plugin would need to be developed that somehow uses this carousel.

LEft and right margin

Submitted by Fernando (not verified) on

I setted a smaller image on the main, and the left and right images are too far.. i need to get them close to the main, like the one in the example above, but i can't do it.

What sould i do to get it done?

Thanks.

Removing the autoplay

Submitted by Fernando (not verified) on

open the JQueryFeatureCarousel.js and the JQueryFeatureCarousel.min.js.

In line 714 of the first file, set the autoPlay to 0.
Now, open the JQueryFeatureCarousel.min.js, look for autoPlay:4000 and then change it to 0.

It's done, now your carousel wont autoplay anymore :)

Number of Images

Submitted by KC (not verified) on

Please excuse me if I am posting a question that has previously been answered. I've looked through the post and i may have just over looked it.

Right now the carousel only hold 5 images. Is there a way to increase this number?

Stop Autoplay

Submitted by Steve (not verified) on

Hi,

Is it possible to stop the autoplay feature?

Also, is it possible to vertically align the feature items to the top of the container?

Thanks in advance,
Steve

Hi, can we show an example of

Submitted by Remi (not verified) on

Hi,

can we show an example of a "movedToCenter function" which return the ID of the feature on center ?

moreover, how can I create independents buttons associated with function which move the carousel at the feature desired ?
example:
- HTML -

- JAVASCRIPT -
function animateCarousel(idFeature){
var id=idFeature;
-> MOVE THE CAROUSEL TO IDFEATURE ???
}

Thanks a lot !

sorry for the problem with my

Submitted by Remi (not verified) on

sorry for the problem with my post :
I repeat my example which I want :

--- HTML ---
-> button onclicked=animateCarousel('1');
-> button onclicked=animateCarousel('2');
-> button onclicked=animateCarousel('3');

--- JAVASCRIPT ---
function animateCarousel(idFeature){
var id=idFeature;
-> MOVE THE CAROUSEL TO IDFEATURE ???
}

Removing Blip Tracker

Submitted by Anonymous (not verified) on

Hi Brian,

Great carousel, thanks.

However, I'm trying to figure out how to remove the tracker blip in the bottom right corner. Is there anywhere to turn this off / remove it?

Regards,

Joel

I am so confused

Submitted by Anonymous (not verified) on

Did you leave steps out of your description? I can't follow any of it, but I am new to this anyway. I really would like that carousel though. How do I do it?

Triggering a move from outside the object (another script)

Submitted by Bill (not verified) on

Hi,

I'm using jQuery WipeTouch (http://wipetouch.codeplex.com/) to detect a swipe effect on the iPad. That code looks like this:

$(function () {
$('#carousel').wipetouch({
allowDiagonal: false,
wipeLeft: function(result) {
***DO SOMETHING***
},
});
});

But I can't figure out how to call the carousel object from within this script. I've tried many variations like:
$("#carousel").featureCarousel().initiateMove(true,1);
$("#carousel").initiateMove(true,1);
carousel.initiateMove(true,1); - this one after setting carousel var on the initial instantiation of the carousel

Can you let me know if it's possible to reference the object externally like this and, if so, what the syntax would look like? Of course, the equivalent would be if I had a "next" link on the page that needed to do the same thing.

Thanks!

Weird issue with Carousel in IE

Submitted by Sam (not verified) on

Hi,

I love this carousel however it does something odd to my background images in IE9. The carousel works but if you scroll down the page the background images in the div behind the carousel move to the right. This only happens in IE and works perfectly in Firefox, Opera, etc...

The page works fine if i remove the carousel. Also as a side note is it possible to move the images in the carousel closer together.

My problem can be seen here

http://www.fredrogulski.com/new

Thanks in advance

Sam

pause / resume

Submitted by LMolr (not verified) on

Hello.
Thank you for the great plugin!
Is it possible (or have any hints on how) to expose the pause / stop / resume to the outside?
It would be useful, for example, to stop the animation when the carousel is hidden.

Thank you!

Changing Opacity of smallFeature images

Submitted by Norm (not verified) on

I was wondering about the opacity of the smallFeature images too. I made changes to the following lines:

jquery.featureCarousel.js

Line 395 new_fade = 1.0;
Line 406 new_fade = 1.0;
Line 436 .fadeTo("fast",1.0);
Line 594 $(this).css("opacity",1.0);
Line 606 $(this).css("opacity",1.0);

The side images are no longer faded. Hope this helps.

-Norm
http://www.normanpemper.com

Carousel not showing up in Chrome!

Submitted by James (not verified) on

Hello, I love this little piece of code – so much better than the carousel I was using before ;)

The problem is that I replaced the original carousel because it borked in IE (surprise, surprise) and this one has fixed that issue, unfortunately it has been a bit sporadic in showing in Chrome (both PC & Mac) and now it doesn't show up at all in Chrome.

The site is: http://www.butlerandyoung.co.uk

Please help! Thanks in advance.

Sorry for the long delay.

Submitted by Brian on

Sorry for the long delay. Seems to look okay in Chrome. I usually recommend setting a specific pixel width and height for the features when there are issues with the carousel not showing.

More than 3 Images

Submitted by Kevin (not verified) on

Brian -- I noticed on the FAQ, you mention that it supports only 3 images but you'd consider changing it. I've actually re-jiggered the carousel to display 4 images. You can see it here: http://www.solarworksforamerica.com ... Let me know if you'd like me to send it over.

I'm still using version 1.0, but I'll look at incorporating the necessary changes into the current version this afternoon or tomorrow.

Of course, my version is customized just for my needs and not to make it easily customizable by others. But, at least it's a start and a little less work for you to undertake.

Kevin, I finally got around

Submitted by Brian on

Kevin, I finally got around to checking out the site and looks like you are no longer using the carousel. I'd be glad to take a look at the code you changed to support more than 3 images. Brian

IE 9 not displaying Feature Carousel without a refresh

Submitted by Kyle (not verified) on

Hi Brian,

I love your FeatureCarousel and intend using it quite a bit.

I have one issue however. When I run a page in IE9 the carousel doesn't appear unless I press F5 to refresh the page.

I don't get this problem in IE8 and earlier or in any other browsers.

I'm pretty new to web development so I'm sure it's something I've done, or I guess it could be IE9.

Thanks

Kyle

IE 9 not displaying Feature Carousel without a refresh

Submitted by Kyle (not verified) on

Please ignore my question for now !

I noticed after looking at your development roadmap that I wasn't using your latest plugin which clearly mentioned it was upgraded for IE9, and I was still using version 1.0.

I've downloaded the latest one, have integrated it into my site so just need to check it in IE9 at home.

Thanks

Kyle

pluginData.featuresContainer.find

Submitted by Jake (not verified) on

Hi, I've added your Carousel to a site, wrapped all the images in the same order as the index.html supplied in the download, but it just shows the gray box. FireBug shows the error 'pluginData.featuresContainer.find(".carousel-feature").first is not a function' in your script.

I know its something I'm doing/not doing, but if you could take a look at: http://amt.enhance2.co.uk/ that'll be fantastic?

Cheers
Jake

IE Height issues

Submitted by Jon Lunsford (not verified) on

Hello, for some reason there are two computers in my office that squash my carousel images in IE 8, one on XP the other on 7. The weird thing is that this bug only shows up on these two out of 20 computers along with a few macs running VMWare...

The bug only appears when you first land on the page too, if you were to navigate to another page in the site and then come back, they're fine.

Some things i've tried include:
set largeFeatureHeight etc. to 1 (no scaling) and to 0 (no scaling) and remove all together (I know that has been known to throw the bug) with all the same result.

Use css to force width and height of images to 100% and to the pixel dimensions (using !important to override anything)

The images do have width and height attributes assigned to them as well.

The page in question is: http://www.thunderroadbrewing.com/_v2/beer/

Works everywhere but the random two versions of IE in my office... Any advice would be much appreciated.

Thanks!

carousel caption

Submitted by Anonymous (not verified) on

Hi Brain
How do I show the caption in the carousel contianer and not at the bottom of the image I have repositioned it in the css.
#carousel .carousel-feature .carousel-caption {
position:absolute;
right:-100px;
bottom:-52px;
width:620px;
/*background-color:#000;*/
text-align:center;
}

This works great in firefox and chrome but in IE8 the caption does not show up. Any ideas.
http://www.bluemoonit.co.uk/

Your carousel is the best I have come across great work.

Also have caption issue

Submitted by Tony (not verified) on

Hi,

I am having the same issue as this, did anyone ever find a solution for this problem? It is the only thing that is stopping me using the carousel on my site.

Regards
Tony

Using same controls

Submitted by toheed (not verified) on

Hi Brian,

I am using two carousel on same page.Problem is that they are using same controls pleases suggest me solution to overcome this problem.

Regards,
Toheed

IE error

Submitted by Karen (not verified) on

Need some help! I add your carousel to my Blogger Blog and it works in all browsers except in IE. It gives me this error "Object doesn't support property or method 'featureCarousel'" and the error point me to this line, $("#carousel").featureCarousel({

Thanks

ie error

Submitted by Karl (not verified) on

Hi Karen - Ive had same issues as well, only appeared the other day on a new install of XP. After I did the XP updates it did vanish - I'm coming to the conclusion that this plugin is awesome on all browsers except IE, however I am going to change it as it cant be relied upon. I appreciate this is not the developers fault but is an MS issue, but since most of the world use IE it's quite important for this type of thing to be working 100%.

External files

Submitted by Anonymous (not verified) on

Is there any way to call different external html files instead of images on the carousel? My apologies if this has been asked already.

Setting a different CSS class

Submitted by Alex Kennedy (not verified) on

This is cool. I have question about setting a different CSS class on the left and the right feature container. I know how set the CSS class with jQuery - but how do I select the containers?

http://www.acpe.edu.au/index.html

Submitted by Sports Coaching... (not verified) on

This is cool. I have question about setting a different CSS class on the left and the right feature container. I know how set the CSS class with jQuery - but how do I select the containers?

Vertical Carousel

Submitted by d0gMa (not verified) on

Is this possible? Ive messed around with the code a bit and found that by making the small feature offset position the sm feature higher, and centering all the features that it kind of works, but i want the feature to move underneath, not back above.

nm, i did it

Submitted by d0gMa (not verified) on

I cracked it....

in animateFeature, theres an if-else to determine if the image is postion 1 (centre) or not (left right back)

but later on an if-else if-else - else selects the left right position of the feature... :

} else {

new_width = pluginData.smallFeatureWidth;
new_height = pluginData.smallFeatureHeight;
>>took this line out<< new_top = options.smallFeatureOffset + options.topPadding;
new_zindex = 1;
new_fade = 0.4;

and placed into the relevant if-else, so each could have an independant height from the top, all thats left to do now is remove sidepadding code

Is this possible?

Submitted by Srdjan (not verified) on

This is the best working 3d js carousel so far.
There is only one question I would like to ask: Is it possible to move carousel left/right by moving mouse left/right over the carousel area. Without clicking arrows or images on the side?

multiple carousels on one page

Submitted by rtpHarry (not verified) on

The #carousel in this line $("#carousel") means look for an element with an id of carousel. In this case if you look in the html code you will find a div with this id: <div id="carousel"></div>

If you wanted to add multiple carousels to the page then you just need to add the html structure with a different id used in the <div> and an additional jquery call to .carousel();

Pages

Add new comment