That’s right, a simple yet elegant and lightweight WordPress slider for FREE. Some DIY required.
No, there isn’t a sketchy download link for a plugin zip folder filled with questionable code. Yes, it really is going to be free – minus some elbow grease on your end – and best of all I’m going to show you how to set it up!
With all that said, I’m going to shed some light on the featured project slider you can find on my home page. Feel free to either use this snippet for your own project or better yet – fork it and make it better!
Let’s Get Started
For this slider/carousel I wanted something like Owl Carousel, but I wanted to build it myself. I also wanted something that was very specific in terms of functionality and super lightweight.
I set up this pen on CodePen to test out a couple ideas and to get the structure up and running. As you can see, it’s super simple, has no user controls and isn’t dynamic.
I’m essentially just making a list of images where each image is stacked on top of each other with a time delayed function cycling through classes to reveal each image.
Making it Dynamic
In order to get the ‘plain jane’ static version to work in my template, I had to create a counter in my main WP Query that would work in conjunction with the jQuery slider.
In the counter if/else statement I was able to to give the first dynamically pulled featured project a class of current starting the jQuery image slider I created earlier. The slider then takes care of looping through the projects pulled in from the WP Query.
Below is the PHP/HTML required in the template file of your choosing to be able to use it:
You can also reconfigure this WP Query to run through any other custom post types you may have set up or just normal posts. Some possibilities: staff slider, car slider, featured post slider, new real estate listings slider, testimonials, etc…
Pretty neat right? ¯\_(ツ)_/¯
Giving it Controls
To be able to loop through the projects that my WP Query pulls in, I used some jQuery CSS trickery to create some navigation arrows allowing you to go through the projects either forwards or backwards.
To do this, I created two global variables: counter and slideArray. The counter for keeping track of clicks on the navigation arrows and slideArray for getting the number of images in the slider.
Then I set up two functions rotateImages() and rotateImagesBack() that are attached to the right and left navigation arrows through a click function to initiate the functions.
Check out the jQuery below:
Making it Look Nice
Now that the HTML, PHP and jQuery are working together to make all of the moving parts orchestrated, it’s time to button up the slider with some CSS.
You can go about styling this however you want:
- traditional image slider
- slider like mine
- testimonials/text slider
- etc
To get the look that I have, copy the CSS below:
