Has anyone used slick slider in their WordPress theme ?

Hi Rich,

Yes that's the one, I use it often for simple front end sites but this is the first time I have tried getting it going on a wordpress site.

I have just had a run through the theme js folder and it is using flexslider, could that be conflicting ?

Craig

Hi Craig,

It's possible. You could try commenting that out temporarily to see if it helps.

When enqueuing the script have you ensured it depends on jQuery?

-Rich

I have just tried it without that file loading and it stayed the same and yes I didnt at first I must say but I do have it dependent on jQuery now.

What I get on the front end is my slide looking as it should but with a grey button above = Previous and one below = Next which when clicked work as you would expect and the slide move to the next one along.

However the default auto play is not working and when I do set the params in js file to set autoPlay to true both slides show asif set to display block :S very strange

I am wondering if that because the parent theme already has jquery flexslider loading in this case to save requests I should work my template around the flexslider...

One other thing rich, I am looking into starting a side project using WordPress to handle a few of the features and have been keeping my eye out for someone who may be interested in giving it a bash. There is not another site out there IN THE WORLD doing this and it is only through a previous job that I know it could work. Drop me an email craig@digimouse.co.uk if you want a little further detail :)

Craig

I've gotten Slick running with Custom Post Types UI and ACFP without issue. I'd definitely be wary of conflicting JS. If your theme doesn't need it, might as well save the resources anyway and stop it from loading even if it's not the problem.

No problem :) The sites I've integrated it with haven't relied on a parent so it may be a conflict due to the slider already in parent theme as you mention.

-Rich

Hi guys, could one of you help me out getting slick running correctly. I will be needing to use it in the future as its my go to slider when just working with html sites so id really like to have my use of it moved into wordpress to.

Craig

This is my code so far,

functions.php

<?php

// Slick slider styles
function slick_slider_styles() {
    wp_enqueue_style( 'slick-slider-styles', get_stylesheet_directory_uri() . '/slick/slick.min.css' ); 
    wp_enqueue_style( 'slick-slider-theme-styles', get_stylesheet_directory_uri() . '/slick/slick-theme.min.css' );  
}
add_action( 'wp_enqueue_scripts', 'slick_slider_styles');

// Slick slider js
function slick_slider_js() {
    wp_enqueue_script('slick-slider-js', get_stylesheet_directory_uri() . '/slick/slick.min.js', array('jquery'), '', true );
}
add_action( 'wp_enqueue_scripts', 'slick_slider_js');

?>

theme-template.php

<!-- Hero Section -->
<section class="cjuk-hero hero-slider">

    <!-- Declare Custom Post Type for Custom Query -->
    <?php 

        $args = array( 'post_type' => 'hero');

        $the_query = new WP_Query( $args );

    ?>
    <!-- //Close Custom Query Declaraiton -->

    <!-- Custom Query Loop -->
    <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

    <div class="cjuk-hero-inner" style="background: url( <?php the_field('background_image'); ?> ); background-size: cover;">

        <div class="cjuk-hero-content">

            <?php the_field('call_out_section'); ?>

        </div>

        <img class="cjuk-hero-img" src="<?php the_field('hero_image'); ?>">

    </div>

    <?php endwhile; endif; ?>
    <!-- //Close Custom Query Loop -->

</section>
<!-- //Close Hero Section -->

theme.js

jQuery(document).ready(function ( $ ) {

    $(document).ready(function(){
      $('.hero-slider').slick();
    });

});

Craig

Hi Craig,

It doesn't look far off what I have so it's a little odd it's not working. I've made a few tweaks to your code but you may need to add some of your styles back in so I'd recommend backing everything up before trying it just to be safe :)

The WP_Query for whichever PHP page you may need:

<div class="hero-slider">

    <?php

        $args = array(
            'post_type' => 'hero'
        );

        $the_query = new WP_Query($args);

        while ($the_query->have_posts()) : $the_query->the_post();

            $background_image = get_field('background_image');
             /* I'm assuming the above field is an image object
            but you can obviously change this if you need to. */

    ?>

        <div style="background: url('<?php echo $background_image['url'] ?>')">

             <p>CONTENT GOES HERE</p>

        </div>

    <?php endwhile; wp_reset_postdata(); ?>

</div>

functions.php:

    //Styles
    function slick_slider_styles(){
        wp_enqueue_style( 'slick_css', '//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css' );
    }
    add_action( 'wp_enqueue_scripts', 'slick_slider_styles' );

    //Scripts
    function slick_slider_js(){
        wp_enqueue_script( 'slick_js', '//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js', array('jquery'), '', true );
    }
    add_action( 'wp_enqueue_scripts', 'slick_slider_js' );

jQuery:

jQuery(document).ready(function($) {

    //Slick Slider
    $('.hero-slider').slick({
        autoplay: true,
        arrows: false, //Set these to whatever you need
    });

});

Hopefully the above helps you to at least narrow down the problem :)

-Rich