Sridhar Katakam

Genesis and WordPress Tutorials

Continuously scrolling image carousel using Soliloquy and Slick

by 25 Comments

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:

genesis-soliloquy-slider-carousel-slick

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.

genesis-soliloquy-slider-carousel-slick-back-end

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:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • I created this with a new copy of genesis sample master theme that you provided. I get a crazy scroll to the right. How can it be set to a certain width?
    -Scot

    Reply

  • Ah… Thank you, Sridhar! I’m excited to try this tut out in practice. Additionally, I’m assuming that one can replace the use of the Soliloquy slider (commercial plugin), with say, the Genesis Slider, or any other slider for that matter?

    Reply

    • No. Other sliders do not provide an API (afaik) to retrieve the images attached to a slider.

      If you do not want to use a Soliloquy, you would need to hardcode the URLs of all the images in a text widget instead of using Soliloquy’s.

      Reply

      • Thanks for the response. That’s a bummer. I wonder if there are any other “free” sliders that can do the same as Soliloquy, at least, for this same function, continuously scrolling image carousel .

        Reply

        • Soliloquy isn’t really doing anything here w.r.t to the sliding/carousel functionality. We are only using Soliloquy to provide a backend interface for the clients/site owner to easily manage the images in the carousel.

          Reply

  • Thank you for this great tutorial Sridhar.

    How would I create a page template to display this slider on rather than the homepage?

    Thanks again!

    Reply

    • Disregard the above comment. I was trying to help someone and they failed to follow instructions somewhere along the line, so the bottom row of images don’t continuously scroll. The large image at the top is the default Minimum Pro image setting.

      Reply

  • Hi Sridhar

    Thank you for this easy to follow tutorial.

    I have on a localhost dev site set this up to display on front-page-4 and it is working great although would it be possible to set this to a full width carousel?

    I have on front-page-1 set up a full width rotating image according to your other brilliant tutorial > https://sridharkatakam.com/random-rotating-background-image-front-page-1-altitude-pro/

    Having the carousel full width as well would improve the UI and look aesthetically correct.

    -Dale

    Reply

  • Hi,

    This is great! Thank you.

    How would I change the code to use the “slug” instead of the “id”? Thanks.

    Reply

    • Yay! I figured this question out. But I have another question.

      I would like the images to link to their URL. What code would I add for that? Thanks again!

      Reply

      • Cool.

        In functions.php, inside sk_soliloquy_transform_to_carousel function replace

        $carousel .= '<img src="'. $src[0] .'" />';

        with

        $carousel .= sprintf( '<a href="%s"><img src="%s" /></a>', esc_url( $item['link'] ), $src[0] );

        That will link the images to their corresponding URLs (set in the URL fileld for each slide).

        One small problem I see in my testing is that the image links in the carousel will not show the hand cursor when hovered over. Let me know if you see this issue as well.

        Reply

        • Thank you so much! That worked perfectly. I tested it on Safari and Firefox… I can see the hand cursor when hover over. No worries there. Thanks.

          Is there a way to make the images, that do not have a link, non clickable?

          Reply

          • Yes.

            Replace

            $carousel .= '<img src="'. $src[0] .'" />';

            with

            if ( $item['link'] ) {
    $carousel .= sprintf( '<a href="%s"><img src="%s" /></a>', esc_url( $item['link'] ), $src[0] );
} else {
    $carousel .= sprintf( '<img src="%s" />', $src[0] );
}
    • >