JCarousel

Shortcode Generator

Instead of typing out your shortcode you can also use our shortcode generator.   Learn More

jCarousel Custom Content

The jCarousel is a pretty nifty script which will let you create "slides" and scroll between them. See the examples below.

Basic Syntax:

[jcarousel]
[slide] Slide1 Content [/slide]
[slide] Slide2 Content [/slide]
[slide] Slide3 Content [/slide]
[/jcarousel]

Options:

visible      // the number of slides you want to be visible at one time
scroll       // the number of slides you wish to scroll by when clicking on the navigation
animation    // animation speed, defined in milliseconds so 1000 = 1 second
auto         // automatic scrolling, set to 0 to disable or however many seconds you need
wrap         // set to "first", "last", "both", or "circular" to determine last slide behaviour
space         // space between slides in pixels

Image Example:

[jcarousel visible="4" scroll="1" wrap="both" space="1"]
[slide]<img src="http://yoursite.com/thumb-1.jpg" alt="" width="100%" />[/slide]
[slide]<img src="http://yoursite.com/thumb-2.jpg" alt="" width="100%" />[/slide]
[slide]<img src="http://yoursite.com/thumb-3.jpg" alt="" width="100%" />[/slide]
[slide]<img src="http://yoursite.com/thumb-4.jpg" alt="" width="100%" />[/slide]
[slide]<img src="http://yoursite.com/thumb-5.jpg" alt="" width="100%" />[/slide]
[slide]<img src="http://yoursite.com/thumb-6.jpg" alt="" width="100%" />[/slide]
[/jcarousel]

Icon Banners Example:

[jcarousel visible="3" scroll="1" wrap="both"]
[slide] [icon_banner type="Leaf"]<h4>Lorem Ipsum Dolor</h4> [/slide]
[slide] [icon_banner type="Footprints"]<h4>Lorem Ipsum Dolor</h4> [/slide]
[slide] [icon_banner type="Download"]<h4>Lorem Ipsum Dolor</h4> [/slide]
[slide] [icon_banner type="Android"]<h4>Lorem Ipsum Dolor</h4> [/slide]
[slide] [icon_banner type="Help"]<h4>Lorem Ipsum Dolor</h4> [/slide]
[/jcarousel]

jCarousel Portfolio Shortcodes

The jCarousel Portfolio Shortcodes function much the same way as our standard portfolio shortcodes Portfolio Shortcode.
All our shortcodes are designed with ease of use in mind, meaning all attributes are optional. Simply add [jcarousel_portfolio] to your page and it will pull in a nicely formatted four column jCarousel portfolio layout with all options enabled by default. You can customize it from there with the options shown below.

Basic Syntax:

[jcarousel_portfolio]

Options:

cat        // the portfolio category to display posts from ie. cat = "design" if you want to display all your portfolio items then leave this blank
column     // the number of columns you want displayed at a time
showposts  // the total number of posts you wish to display
offset     // the offset will skip a number of portfolio posts at the beginning of your list
disable    // you can disable certain elements from displaying such as image, title, excerpt ,date, more, visit
teaser     // adding content here creates a teaser column to the left where the jCarousel nav and your custom content are placed.
scroll       // the number of slides you wish to scroll by when clicking on the navigation
animation    // animation speed, defined in milliseconds so 1000 = 1 second
auto         // automatic scrolling, set to 0 to disable or however many seconds you need
wrap         // set to "first", "last", "both", or "circular" to determine last slide behaviour

Simple Example:

[jcarousel_portfolio column="2" disable="more,visit,date"]

Example With Teaser Column:

[jcarousel_portfolio column="3" 
teaser="<h3>Three Column Portfolio</h3>Phasellus neque nisi imperdiet eu luctus id pulvinar a arcu."]

jCarousel Blog Posts Shortcodes

The jCarousel Blog Shortcodes function much the same way as our standard blog shortcodes Blog Shortcode.
All our shortcodes are designed with ease of use in mind, meaning all attributes are optional. Simply add [jcarousel_blog] to your page and it will pull in a nicely formatted three column jCarousel blog layout with all blog options enabled by default. You can customize it from there with the options shown below.

Basic Syntax:

[jcarousel_blog]

Options:

column     // the number of columns you want displayed at a time
showposts  // the total number of posts you wish to display 
category_in // set the category IDs that you wish to grab your posts from. If you want to display all your posts then leave this blank
offset     // the offset will skip a number of posts at the beginning of your list
disable    // you can disable certain elements from displaying such as image, title, content, meta, more
teaser     // adding content here creates a teaser column to the left where the jCarousel nav and your custom content are placed.
post_content    // set to "excerpt" or "full"
scroll       // the number of slides you wish to scroll by when clicking on the navigation
animation    // animation speed, defined in milliseconds so 1000 = 1 second
auto         // automatic scrolling, set to 0 to disable or however many seconds you need
wrap         // set to "first", "last", "both", or "circular" to determine last slide behaviour

Simple Example:

[jcarousel_blog column="2" disable="more"]

Example With Teaser Column:

[jcarousel_blog column="3" 
teaser="<h3>Three Column Blog</h3>Phasellus neque nisi imperdiet eu luctus id pulvinar a arcu."]

jCarousel Live Demos

Many shortcode graphical styles vary on a theme by theme and skin by skin basis, so don't forget to check out the live demo of your specific theme, where you will find "get the code snippets" and more usage examples.