ctgSlider – jQuery Slider / Carousel

Caption 2

Caption 3


Caption 4

Then your javascript linking, within the head tag looks like:






Next call the slider function within a jQuery doc ready statement (supports multiple instances):


$().ready(function() {  $('#ctgslider').ctgslider({  'timelength':4000,    'showbuttons': 'Y',   'minibuttons':'Y',    'minibuttonopacity': .65,    'centerbuttons': 'Y',    'alignrightnextbutton' : 'Y',  'btnoffset':5 ,  'effects':'fast',  'captioneffects':'explode',  'captionclass':'.Caption',   'usenumbers':'Y',  'minibtnimagesrc':'images/star.png',  'usecaptions':'Y'  }); 

$('#ctgslider2').ctgslider({ 'timelength':6000, 'showbuttons': 'Y', 'minibuttons':'Y', 'minibuttonopacity': .2, 'centerbuttons': 'N', 'alignrightnextbutton' : 'N', 'effects': 'fold',  'captioneffects':'explode' }); });

Options are as follows:

Css can be adjusted as needed within ctgslider.css. This includes slider size, placement of the mini buttons, Previous and Next Button Graphics, etc.

Cross-Browser-Tested

I’ve tested it in multiple browsers and it currently works fine on:

Using with WordPress

If you are using this slider with WordPress, the jQuery UI script will have to be included in this manner:

If you have questions, or feature requests, please let me know.

Contact Me!

Your Name (required)

Your Email (required)

Your Message