How to create WordPress sliders for static and dynamic content
If you want to take your website to the next level one of the most important elements to add is a WordPress slider.
A slider brightens up your website and makes it stand out by adding color and great images to your pages. Not only that, but it can also provide useful information to the user about how your product or anything else you display looks and works.
Many people don’t realize that, in addition to a basic static slider, you can also create a custom image slider with dynamic content for your single posts. Furthermore, with Toolset, you can also build sliders that display not just images but all kinds of dynamic content including headings, custom fields and much more.
Below I will go through these three types of sliders and how you can create them with Toolset.
What is a static slider?
A static slider is a basic slider for images that you will probably be familiar with. You create the slider and add the images and that is it. No matter where the slider appears it will display the same images.
Below you can see a slider that I created by updating one of Toolset’s reference sites. On the travel website demo (which you can check out for free), I have added a static slider on the homepage with some of the locations.
I selected the images from my library and included them along with a caption – just like you would when you’re adding a regular image on WordPress.
You can add static sliders anywhere you like on your WordPress website using Toolset’s Image Slider block which is one of the many blocks you can find in Toolset Blocks.
However, there are scenarios when you don’t want your slider to be static.
What is a dynamic image slider?
If you are building truly custom websites then you will need to add sliders which offer dynamic content.
Continuing with the travel website example, you might want to add an image slider to each of your Tours posts. The best way to do this is by creating a template for your Tours posts. The problem with adding a static slider to your template is that the images will be the same regardless of the Tours post you are looking at.
For example, if you create a slider with images of Venice and add it to the template it will look great on the Venice Tours post. But it will look strange when you click on a Tours post about Semuc Champey.
There are other problems with adding static sliders. For example, imagine that you add a static slider directly onto each of your Tours posts. What would happen if you wanted to edit them? You would have to individually edit each slider which obviously takes time.
This is why you need a dynamic slider. With a dynamic slider, you create the slider once in your template, add a dynamic source and the slider will appear on each of your posts with the correct images for that post. Now when you want to edit the slider (for example, by adding captions) you can do it once and each image slider will update.
Below you can see the post for Semuc Champey with a dynamic slider. We no longer display images of Venice on this post.
What about sliders with dynamic post content?
Sometimes you need more than just images on your slider. With Toolset you can build sliders that contain all types of dynamic content.
On my travel website, I might want to add a slider on the front-end that not only contains images of my tours but some information about them as well such as the destination, price and a brief description. You can do all of this using Toolset’s View block.
How to create a static slider with Toolset
We can create a static slider in minutes using Toolset. We will use the travel reference site as an example. Remember to check out our video on how to create a static slider for an in-depth tutorial on all of the features I will mention below.
I will add the slider to my homepage here.
As I mentioned above, you can add a slider by inserting Toolset’s Image Slider block. You can then just insert the images you want and even rearrange the order using Toolset’s drag and drop feature.
As soon as you click Insert gallery your image slider is ready to go. However, there are a few ways you can style it to make your slider stand out even more.
Styling your static slider
On the right-hand sidebar, there are a number of options to style your slider. Under the Display Settings tab you can find four features:
- Columns Number: Change the number of images you see at any given time. Below you can see I have set it to two which means you can only see two images.
- Crop images: Make sure that your images are the same size by cropping them. Or you can toggle the option off as I did below. Notice how the images are of different (their original) sizes.
- Captions: Choose whether or not to display captions at the bottom of each image. You can also enter captions by clicking on the caption area and adding your text.
- Choose the slider style: Toolset offers three slider styles.
- Image list with a lightbox when the user clicks on the image.
- An image list with a larger selected image. The other images will appear below the selected image.
- Image list without a lightbox.
I’ve selected the image list with a lightbox. You can see the lightbox when I click on the image on the front-end.
There are further ways to style your image slider. First, if you include captions you can style them in many ways including by changing the font, line spacing, and background color.
In addition to the caption, you can further style the slider itself under the Style Settings tab. You will be able to add a background color, margin/padding, a border, and much more.
How to design sliders for different screen sizes
Another advantage of using Toolset is that its designs are responsive so you can change its appearance for different screen sizes. For example, a template might look great for a laptop screen but may not fit a screen for mobiles. Check out our lesson on creating responsive designs to find out everything you need to know.
There are two ways you can edit your slider for different screen sizes. You can either click on the different icons at the top of the editor or within the boxes for each of the features. Once you click on an icon the editor will change so you can see how your slider will look for different screen sizes.
You can adjust all of the styling options I mentioned above for different screen sizes.
Once you’ve made your edits you can save the page and check out your slider on the front-end.
How to create a slider with dynamic content
Now you get to see the true power of Toolset as we create a custom image slider with dynamic content for our Tours posts. We also have a tutorial video on creating sliders with dynamic post content if you want a step by step walkthrough.
To build a slider for the images of my Tours posts I first created a custom post type for my trips called Tours. You can check out our guide to creating custom post types for more on how I did it.
When you create a slider with dynamic content you need to consider what will be the source for your images. Generally, that source will be a custom field for images.
Naturally, a slider needs multiple images. However, custom fields usually only store one piece of information. But with Toolset you can make your custom fields repeating in order to store multiple images which will be displayed on the image slider.
I’ve created a number of custom fields for my Tours post type. One of those is a gallery image field. To make the gallery field repeating I simply had to check the relevant box.
You can find out all you need to know about custom fields and repeating fields in our guide to creating custom fields.
Once you have created your custom field it is time to add the images to each of the Tours posts. As I create each new Tours post under the Gallery image custom field I simply click the + button to add additional images.
We now have the “source” for our slider. Next we just need to add the slider to our template for Tours posts. If you are unsure how to create a template take a look at our video tutorial on how to create templates to display custom posts.
Similar to our static slider we start by inserting the Image Slider block into our template. However, instead of uploading or choosing images to add, we select the dynamic source.
You are now able to specify which field will be your source. This is where I select the Gallery image custom field that I’d created beforehand.
Your slider will now appear displaying the images from your Gallery image custom field.
Here is where you know that the slider is truly displaying dynamic content. Simply use the dropdown at the top of the editor to switch between the Tours posts. You can see each tour post now with different images. These are the images from the Gallery image custom field for each post.
On the right-hand sidebar, you have the same styling options as for a static slider. The only difference is that you can change the source for your images using the dropdown.
Once you’re happy with the template you can save it and check out each of your Tours posts on the front-end.
How to create a slider with dynamic post content using Toolset
While dynamic image sliders will make your website look pretty, sliders with dynamic post content will truly show your visitor how powerful your website is. To get the full guide check out our video on creating sliders with dynamic post content.
Just like with our dynamic image slider (also known as a View slide) you will need a custom post type. I’ll stick with the one I created called Tours and will use the content from its custom fields.
You can create your slider anywhere you like on your website. Once again, I’ll add this one to my homepage.
Unlike the image sliders, to add a slider with dynamic post content I need to insert Toolset’s View block so that I can create a View. A View is what you create in Toolset to load posts from the database and display them in fancy lists – such as a slider.
When you head into the design wizard you have the option to add pagination to your slider which is important as it acts as the page-turner for visitors to switch between the slides.
You also select the loop style. For this View slide, I want to use the Grid style as I want to display three Tours posts at any one time in a grid. However, you can use other styles including the unformatted style depending on the type of slider you want.
As part of the wizard, you can also choose whichever post type you want to display on your slider. For example, below I selected the Tours post type.
Once you finish your wizard you have now created your View. You can now use the View block controls which you can find on the navigation tool on the top left to define how the View works.
Some of the edits you will need to make on the right sidebar include:
- Enabling pagination with automatic AJAX transition – to automatically switch been the slides
- Choosing the number of items you see – I’ve selected to display three of my tours posts at any one time.
- Removing the spinner – this is unnecessary for a slider
There are also some other edits you can make to your slider:
- Show each page for (seconds) – decide how long until the slider transitions to the next slide
- Pause pagination transition – the slider will not transition to the next slide if the mouse is hovering over it
- Transition effect – choose the type of transition
- Transition duration – the length of time between each transition
We can now add Toolset’s Container block which is an incredibly useful block to “host” your other blocks inside so that you can apply the same styling to them.
Once we have the Container block we can start to add our content which we will draw from the custom fields for our Tours.
For example, I add the featured image for each Tour post by including the Image block and making the source dynamic so that the content comes from the Featured Image.
We can do the same with some of the other custom fields by adding the relevant block, making the block dynamic and selecting the correct source. As an example, below the image, I’ve inserted a regular column and then added the Heading block with dynamic content. I chose the City field as the source.
I can add further custom fields in this way until my View slider is complete with custom fields.
Another great trick is that you can filter your posts to display only those that match a certain requirement. For example, below I added a filter to show only those that are promoted tours.
If you want to learn how to get the most out of this useful tool, check out our documentation on filtering views query by custom fields for more information.
Build your slider with Toolset today!
Now that you know how to build both static and dynamic sliders all that is left is to try it out yourself.
Here are the steps to take:
- Download Toolset
- Check out one of our Toolset courses to learn all about creating sliders and other features with Toolset
- Practice adding your sliders and other features using one of Toolset’s free reference sites.
- When you are ready, install and register Toolset on your own website and get started!