Get started with WFL

Just pick something below to explore my work, services and more.

Latest Articles
Latest Art
Latest Photo
Latest Music

Creating a slider using jQuery and WP-REST API

April 20, 2019Will Leffert

While working on the NerfedGamer.news website, I decided to create my own slider using jQuery and WP-REST API.

I despise nearly all the freebie post-slider plugins. They are overengineered to a large degree to meet a wide swatch of users, and this increases load time as well as creates additional points of failure.

Why utilize the REST API, you ask? Well, I want to be able to quickly and simply make any updates necessary without utilizing WordPress' plugins system to create the queries needed, and I love utilizing REST APIs. Plus, my last script I uploaded to GitHub was pure PHP, so I figured..  Lets go pure Javascript this time around.

If you want to just go ahead and grab the .js file, you can hop on over to the GitHub repo here. What follows is just some basic info about the functionality, and the .js file is well-commented to note what you need.

Creating a slider utilizing jQuery is easy. I didn't even bother with actual sliding; since this is for NerfedGamer.news, I wanted to avoid any left/right motion, and instead went with fade transitions. This has the added benefit of making it MUCH simpler to control; no need to redraw objects to handle left/right, or creating extra code to handle fade-from-left or fade-from-right depending on button presses. The transition just happens, and that is that.

I was originally on the fence about the auto-slide functionality; I personally hate it, but I can see the value in it. Still, its simple to do.. I've got my slide functions that can easily be triggered by SetInterval(), and can ClearInterval() on button presses, so no big deal.

I opted to avoid a pause-on-hover for now; as I stated previously, I hate auto-sliders, but if someone wants to go back or stop the slide, they can just utilize the buttons (which will clear the interval and stop the auto play). I will only have 3 slides on my implementation of it, so a hover-pause really isn't all that useful.

Let me know if you utilize my code; I'm always curious to see implementations.