WordPress flySlider

While building the ELSEAPPS site we developed flySlider, named because of the way the left post disappears. You’ll see it in action on most of the pages on this site. The design brief was simple enough:

  1. Endless looping through one or more categories
  2. Styling flexibility
  3. No animation on small screen devices.

We’ve not packaged flySlider as a plugin, but it does come with a short code and instructions on implementation. In fact, these are the instructions.

An important note

You’ll need to handle layout and styling yourself. The ELSEAPPS site uses Emil Uzelac’s Responsive child theme for WordPress; the classes used in the downloaded code are part of, or are based on, that. We’ve included the selectors we used as examples, but they’re only useful if you’re running with the same theme.

Typically you’ll need to rewrite the layout and associated classes in flySlider.php to get the look you’re after, and add corresponding selectors to your theme’s style.css file.

Download the code

The zip file contains

  1. flySlider.php to put in your WordPress theme folder. You’ll need to edit the Output section of this file to suit your site. For example, we’re only showing the post image if the excerpt is short, and we’ve constrained the height of each post entry so the buttons align. You may want something completely different.
  2. ADD-TO-functions.php to append to the functions.php file in your WordPress theme folder.
  3. EXAMPLES-FROM-MY-style.css which is primarily for your reference while styling your own slider.
  4. flySlider.js to copy to the /js subdirectory of your WordPress theme folder. Unless you’re using the Responsive Child Theme you may need to edit this too, as it currently has code to ensure the final post in the row (and only the final post) is assigned the fit class.

Once you’ve copied the files, you’ll need to tweak the Output section of flySlider.php, adding selectors to your WordPress theme’s style.css to get the look and feel you want.

The shortcode accepts five optional arguments:
[flyslider id="activities" category="8" interval="10000" limit="4" exclude="0"]

  1. Using a unique id lets you have multiple instances of flySlider on a page, each with different settings.
  2. category is the id of the post category you want to display. You should be able to display multiple categories using a comma separator, but this is untested.
  3. interval determines how frequently flySlider updates. The video at the top of the page is set to 2000 milliseconds, much too quick for the real world. We use fifteen seconds (15000).
  4. limit is the number of posts to display at a time. This number will be shown once page loading is complete, after which one post will be replaced every interval milliseconds.
  5. I added exclude so we could avoid showing the current post in the slider.

However much you revise it, we’d appreciate it if you’d leave the credits in the files. Enjoy.