Many themes come with their own sliders. There are also great plugins that create slides out of anything. Still, in many cases, creating your own slider is the best solution. I’ll show how you can create your own sliders out of any WordPress content and display them anywhere in your site, using Toolset plugins (WP Mayor readers can get an exclusive 20% discount when they purchase Toolset).
But first, “why”. Why would we ever need to build custom sliders?
Let’s look at a live example of the ‘video features and interviews slider’ from the BBC website.
A simple and minimalistic design, with simple horizontal transition. But hey, there’s a gotcha! The slider displays three interviews at a time. When you scroll, you get the next three. Ouch, that’s going to be difficult to build with a stock slider.
Another one. a gallery of sports cars:
Source: Editorial Autos MSN
The interesting thing about this slider is that it shows ‘cars’. In our WordPress admin, we want to arrange these cars as a custom post type. Then, the slider should query the featured cars and display them with their custom fields. We could, of course, duplicate this information and save also in generic ‘slides’, but this would be a real hassle to maintain. It would be much more fun if the slider would take the content directly from the correct content type and fields.
To help you build custom sliders easily, Toolset team has created a tutorial on sliders CSS and HTML. The techniques in that tutorial will help you design slides with floated elements, absolute positioning and other advanced design techniques. It’s a useful resource for anyone building custom sliders, using any web development framework.
And, to get started easily, you are also welcome to download complete Toolset slider modules. The Toolset sliders library contains all sorts of sliders for all sorts of themes. The best thing is that these sliders are just your starting point. Once you’ve downloaded a slider module, you can fully customize and change it to your needs.
Building Custom Sliders with Toolset
When the prepackaged solutions are not enough, you can always build it yourself with Toolset plugins.
Here is the idea behind building custom sliders with Toolset:
Define the content using Types plugin. If the content types already come from your theme or from another plugin, that’s fine too.
Build the sliders using Views plugin. Views will query whatever you select from the database and can display it in any way. Sliders included.
When you create a slider with Views, the first thing you want to do is choose what the slides display. Views can query any content type from your database. This even includes categories. So, you can create sliders from any post type or taxonomy.
Then, you can filter the data. For instance, let’s say that we want to show only ‘featured’ stories in our slider. We can use a custom field or taxonomy to indicate that ‘stories’ are featured. Then, we tell the View to filter the results and keep only those ‘featured’ items. Simple.
Next, we tell the View to act as a slider. A slider means that we display each item (or items) at a time. When visitors click on ‘next’ or ‘previous’, we display the next set. When we enable ‘slider mode’ for the View, we select how many items appear in each page and how pages transition. In the settings section, we select how it works. The visual design is all up to our creativity. We will design slides and transition links with full HTML control.
Now the real fun starts. We’ll craft the HTML and CSS for slides. Don’t worry. Views takes care of the heavy lifting, letting us focus on the good stuff. Views takes care of switching slides. All we need to do is enter our CSS and HTML for the slides themselves.
We use Views HTML editor to place fields using shortcodes. There’s no need to memorize these shortcodes.
Just click on the V icon to find fields that belong to the content and insert them.
When we are all done, we insert the View (our custom slider) anywhere in the content. We can display slides inline with content, as widgets and even in templates.
Views Sliders Make Sites Load Faster
Besides the flexibility that we get with Views sliders, there are other things that make our effort worthwhile.
Views creates plugins using an innovative approach, which delivers exceptionally fast load times and smooth transitions.
Conventional sliders load all the slides together and then scroll through. This means that the browser needs to query a lot of heavy content from the server before it can display the page. Have you ever seen a page that tells you for 30 seconds “Loading…”? This is what happens when pages load a ton of content from the server. It makes visitors wait, sometimes give up and also loads web servers.
Views sliders display content on-demand. They will load just the content that needs to display right now. This means that when a slider contains dozens of images, only the first set is loaded when the page loads. The other images will load when they are needed. If visitors click and navigate away from the homepage, the other images, that are never displayed are also never loaded.