How to create a slider from gallery images

About the slider

Gallery slider short code introduced in v7.2.3 makes the custom slider short code introduced in v7.2.1 and the regular slider shortcode that was present from a long time obsolete.

If you have to insert a slider in post or a page, this is the way to go.

Did we tell you this slider is a smart slider meaning it serves different sized images for desktops, tablets and mobiles?

Note: Unslider, a lite weight slider that spans the entire window width was introduced in v7.2.4. Please refer to its usage instructions below.

Using the gallery_slider shortcode

[gallery_slider ids="1780,1771,1766" width="640" height="380"]

The above short code create a slider with slides of width 640px and height 380px using the images with id's 1780,1771,1766 from your media library.

Unlike the slider shortcodes before or the custom slider you don't have to crop, or resize images before uploading.

Resizing and cropping is automatically handled for you.

Just note that, wordpress can not upsize a images. If you upload a image smaller than slider dimensions.

Target link field is added by Swift theme, and isn't a standard WP option.

How to get the ID's of images?

Standard way

One way is to hover over the image in wordpress media library page or media uploader, and get the ID from the status bar of your browser.

1. Select the image.
2. Hover over edit or delete image link
3. In the status bar you will find the ID.

The smart way

1. Click on create gallery and insert a gallery with you slides.
2. Switch from visual to html mode editor
3. Now change the gallery short code to gallery_slider and add the width and height.
4. No step 4, thats it :)

More shortcode attributes

Apart from the width, height and the ids, you can specify the following attributes

responsive_images (Default = true)

When you enable responsive layout, this shortcode serves images that are optimism for tablets/mobiles. Some times this may not be the desired behaviour, specially when you are using a slider that spans the entire width of the page.

setting this to false will not alter image sizes on tablets on mobiles.

class (default="")

You can give the slider a class with this attribute. You can add as many classes you want.

Typically, you use to to align the slider. Below are some handy classes.

• aligncenter
• alignleft
• alignright