My latest project over on the Underground Film Journal was to integrate the Slick carousel slider into the site. Slick is a jQuery plugin and all you have to do is load some Javascript and CSS into your theme to get it launched. Super easy.
It was also surprisingly easy to integrate Slick into a WordPress loop. For that, all I had to do was initiate a loop, insert a containing div for the Carousel that I defined in the Javascript, then display each post — really, some Custom Fields for each post — within a separate div for each post. Boom. Done.
The difficult part, though, was getting the styling right, particularly in making it properly responsive. The nice thing is that Slick has some responsive coding built into it. All you have to do is input a couple of screen-width variables matched with how many slides you want to show per each “breaking” width.
Also, regarding the styling, I really didn’t like the default “previous-next” buttons that it displays. I thought they were way too small, so I had to just make them bigger and I’m happier.
Right now, Slick is appearing in two spots on the Journal. One — seen above — I’ve revamped my old Underground Films Streaming Online page to display films to stream by genre, meaning that I run multiple loops and call up a Slick containing div for each loop.
The other spot I’m using Slick — seen below — is on my filmmaker Tag pages to scroll through streaming short films for each filmmaker.
I’m extremely happy with Slick and I feel like I can really expand on using it, especially in updating the styling and how much I display for each streaming film. My original goal was to try to mimic the carousels on the index pages of Hulu. Not quite there yet, but getting close.
If you need help integrating Slick into your own WordPress site, or would like me to do it for you, feel free to contact me.
