Adding slick to a Genesis child theme

You can see slick here – https://kenwheeler.github.io/slick/. It’s a lightweight carousel with tons of flexibility.

View slick

Add the two folders, js and slick, to your theme’s main directory. (You can download them with the link below.)

Download slick files

Add this to your functions.php:

//* Enqueue slick 
add_action( 'wp_enqueue_scripts', 'gp_slick' );
function gp_slick() {
    wp_enqueue_script( 'slick', get_stylesheet_directory_uri() . '/slick/slick.min.js', array( 'jquery' ), '', true );
    wp_enqueue_style( 'slick-css', get_stylesheet_directory_uri() . '/slick/slick.css', array() );
    wp_enqueue_style( 'slick-css-default', get_stylesheet_directory_uri() . '/slick/slick-theme.css', array() );
}

// Enqueue Custom JS script
add_action( 'wp_enqueue_scripts', 'enqueue_custom_script' );

function enqueue_custom_script() {
    wp_enqueue_script( 'custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ),  '1.0.0', true );
}

When you are ready to use the slick carousel you can add the HTML below anywhere you like.

    
your content
    
your content
    
your content

Make sure the class ‘responsive‘ matches the class used in your custom.js file.