Sliders are a staple of modern websites, typically displaying an image with a caption and automatically cycling through a series of such slides.

Views sliders transition between posts and can contain any content from the post, and are actually a kind of pagination with automatic updates.

You create a View which queries the database for the posts the slider will cycle through, set the pagination options, then design the output that appears on each slide in the Loop Output section.

Create a View for the slider content

A slider transitions between posts, so first you need to create a View to generate the list of posts which will act as slides. These can be standard WordPress posts, or custom posts made with Toolset or 3rd parties such as WooCommerce products.

Here is how you would add a slider of standard WordPress posts with the ‘featured’ category to your homepage:

  • Edit the page using Content Layout Editor and insert a View Cell in the required row
  • Create a new View, and choose Display the results as a slider
  • In the Query section choose the type of content (e.g. “posts”), the ordering preference, and any limit (e.g. show only 3 matching posts)
  • Add a Query Filter which specifies the category must be “featured”, as shown here
Query filter for featured posts

Set pagination options for the slider

  • Scroll to the Filter section and the Pagination and Slider Settings
  • Because you specified this would be a slider when creating the View the options are pre-set, including automatic AJAX transition, showing 1 item per page for a duration of 5 seconds, with a fade effect lasting 500ms
Pagination and slider settings section

Note if you are editing an existing View to convert it to a slider the Pagination and Slider Settings may not be visible, but can be exposed through the Screen Options tab at the top of the page, and you will need to set the options.

Add content to the slides

  • Scroll down to the Loop Output section. The Loop Output Editor already has a link to the template underneath added, which is where you will add the content to appear in the slide
  • Use the Fields and Views button to add shortcodes for the fields to include, such as the post featured image and the post title as a link, optionally adding HTML markup and custom CSS to style the slider
Basic slider content in View template

This will produce a fairly crude slider that could be improved not only with styling but by adding pagination controls to manually advance between slides. We’ll look at both of these in the practical example below.

Learn by doing

In the accompanying training site the home page includes a featured artists section which shows 3 artist posts. Let’s convert that to a slider which shows one artist at a time.

Snapshot of the finished featured artist slider

This section is currently generated by a View cell in the Content Layout for the homepage. We could edit this cell by editing the homepage Layout, but we can also edit the underlying View directly and make the required changes there.

  • Go to the Toolset -> Views page and choose the Featured Artists View. This is the View inserted into the Content Layout using a View cell
  • This View already displays a maximum of 3 artists who have the custom field Featured checked
  • The pagination settings are not currently shown, so use the Screen Options tab at the top of the page to check the Pagination and Sliders Settings option of the Filter section
  • Screen options tab on a View page
  • Scroll to the Pagination and Slider Settings section
  • Choose Pagination enabled with automatic AJAX transition and specify 1 item per page, optionally editing other settings such as those for the time between and length of slide transitions
  • Screenshot of slider settings for automatic pagination

    We want to add pagination controls so that users can manually advance to the next or previous slide.

  • In the Filter Editor insert a new line between the wpv-filter-control shortcodes and use the Pagination controls button to insert the necessary shortcodes that render the controls
  • Choose Previous and Next page controls and Navigation controls using dots, and for the Output Style select Raw output. We are going to style these controls manually
  • If you save the View and check the results on the front end you should see that the slider works, but the positioning and content of the pagination controls is not what we want, as shown here.

    Results of the slider without extra styling

    We want to move the dot controls below the slides, change the text for the next and previous links to arrows, and move these to the side of the slides.

  • In the Filter Editor the text for Previous and Next are wrapped in wpml-string shortcodes. Change Previous to « and Next to ». (These are special HTML entity codes to produce left and right arrows.)
  • Scroll down to the Filter and Loop Output Integration Editor near the bottom of the View
  • We haven’t mentioned this meta box before. When a View is rendered it comprises two parts, the filter and pagination controls, and the generated list of content. The two shortcodes in this editor insert these two sections on the page. We want to reverse the order (so the pagination controls come after the slide), and we will also add some HTML markup to make targeting these sections with CSS easier.

    Edit this section so that it looks like this:

    Screenshot of Filter and Loop Output integration editor
  • Scroll back to the Filter Editor and in the CSS editor tab add the following custom styles
  • slider-styles
    /* Size and center container div */
     .slider-container {
       position: relative;
       max-width: 400px;
       margin: 0 auto;
     }
     /* Position prev/next controls */
     .wpv-filter-previous-link, .wpv-filter-next-link {
       position: absolute;
       top: 40%;
       font-size: 200%;
     }
     
     .wpv-filter-previous-link {
       left: -20px;
     }
     .wpv-filter-next-link {
       right: -20px;
     }
     /* unset bottom margin of image when in slider */
     .slides .featured-artists {
       margin-bottom: 0;
     }
  • Save the View and revisit the home page

The Featured Artists section should now contain a slider that looks like our objective at the start of this section.

Need help?

Go to the Beyond the Basics support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.

What’s next?

Step 3Conditionally show content