In the members-only forum, a user asked
I came across this site http://brittneykluse.com/ and liked the header slider. It has big images that bump next to each other and slide nicely. It would be great to see you implement this same type of slider in any of the Genesis Child theme.. possibly Cafe Pro, Altitude Pro, or any other that fits the bill. Either way the slider sliding idea is neat, and not one I see too much of, and would be nice to learn how to apply that in a Genesis theme. Thanks.
In this tutorial I provide details of how we can loop through images of a Soliloquy slider (commercial plugin) and use Slick jQuery script to display these as a responsive, infinite looping, circular carousel in a custom 'Home Carousel' widget area below header in Genesis.
Screenshot:
Screencast:
While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.
Step 1
Install and activate Soliloquy (the commercial plugin, not the Lite version). Create a slider and select/upload the images that you would like to appear in the Carousel. In my test site I have used images that are 1600 x 1050 although in hindsight it would have been sufficient if I uploaded images that are 500px tall as we are going to specify a height (500px in this example) for custom image size handle and images of this height will be displayed. All the images need not have the same width.
Arrange the images in the order that would like them to appear in the front end. We are only going to fetch the images from this slider in our code, but not any settings. Hence 'Config' and 'Misc' tabs need not be configured.
Step 2
Download Slick and extract the zip file.
Upload slick.min.js to child theme directory/js (create if not existing).
Upload slick.css to child theme directory/css (create if not existing).
Create a file named say, slick-init.js child theme directory/js having the following code:
