Create A Shortcodes Ultimate Carousel (jcarousel)

Author: Denny Brown Last modified on: October 6, 2018 11:02 pm
Share this post...

To start, take a look at the example shortcode below for the jcarousel.
gn_jcarousel source="post" limit="3" items="1" size="1013x269" link="none"

This code says that the carousel should grab the images that are attached to the post that the code is on, only use the first three attached images, only show one image at a time, make the size of the carousel 1013 pixels wide by 269 pixels tall, and don’t link to the image file.

Adding Images To The Carousel

You can tell the carousel which images you want to use by attaching images to a post. One way you can attach an image to a post is to press the “Add Media” button in the post editor. Upload the images you want, but don’t press “Insert into page”. Instead, close Insert Media by pressing the “x” in the upper right corner of the window, or lightbox. Another way you can attach images to a post is to click on “Media” in the left sidebar, search for the image you want, and look in the “Uploaded to” column, click “Attach”, and then select the page or post you want to attach the image to in the lightbox that pops up. If the image you want is already attached to another post, then see below.

The source option can be set three different ways.
source="post" // Use images from the post this code is on.
source="post=123" // Use images from the post with the id 123.
source="cat=123" // Use images from the category with the id 123.

Which ever way the source option is set, the images will appear in the order in which they were uploaded. It’s important to upload images in the order you want them to appear in the carousel. If you later decide that you want to rearrange the order of the images, you’ll have to delete them from the Media Library and reupload the images in the new order you want.

Specifying The Total Number Of Images To Use

Although jcarousel will load all of the images attached to a post by default, you can tell the carousel to only load a few with the limit option.

limit="5" // Only load the first 5 images attached to a post.

Choosing How Many Images Are Visible At Once

More than one image can be shown at a time, horizontally only. For example, if you have two images that are each 100px wide and the carousel is 200px wide, then you can show two images at once. If the width of the number of images you want to show is bigger than the width of the carousel, then carousel will become wider automatically. However, it might not look well, in which case, you’ll probably need to set this to a lower number.

items="1" // Show 1 image.
items="5" // Show 5 images. Check if the carousel displays right!

Setting The Size Of The Carousel

The size of the carousel can be set with the size option. The first number sets the width; the second number sets the height. Both width and height are in pixels.

size="32x64" // Set the size to 32 pixels wide and 64 pixels tall.

Customizing Image Links

Since each image in the carousel is also a link, when a user clicks on an image, the link can point to a few different things.

link="none" // Refreshes the current page.
link="image" // Direct link to the image file.
link="permalink" // Links to an information page about the image.
link="caption" // Links to the URL found in the image's caption.

In order to use the caption option, make sure you put a URL in the “Caption” box when you upload an image. If the caption option is used and no URL is found in an image’s caption, then the page will just refresh.

Specifying The Transition Speed

The speed of the transition between images can be set with the speed option. This option affects the time spent changing the images—not how long each image is displayed. This option lets you set the number of milliseconds you want the transition to last. There are 1000 milliseconds in 1 second.

speed="500" // Transition takes half a second to complete.
speed="1000" // Transition takes a whole second to complete.

Adding Space In Between Images

You can add some extra space in between images with the margin option. The number you enter is in pixels.

margin="64" // Put 64 pixels of empty space in between images.

All Together Now

You can combine all or only some of the options to create your customized carousel. At minimum, you should use the source, items, and size options in the jcarousel shortcode. The order you specify the options in doesn’t matter.

// Minimum options required for a functional carousel.
[gn_jcarousel size="828x220" source="post" items="1"]

// This shortcode is using all of the available options.
[gn_jcarousel source="post" limit="3" items="1" size="1013x269" link="none" speed="500" margin="256"]

Leave a Reply