WordPress

Has anyone used slick slider in their WordPress theme ?

Hi everyone,

I have been messing around now for hours trying to get the slick slider js to work in a WordPress theme with Custom Post Types and Advanced Custom Fields.

I have the post loading and content on page looks how I want but the slider it self is not working however the slick files are loading fine because I have switched to the CDN versions to make sure I can get this going before adding the files in.

I an not interested in the slick slider plugin because it does not suit the content I want on the slides.

I tried out slider revolution and again for this purpose is is not suitable.

Any help appreciated!

Craig

3 Answers

Hi Craig,

Do you mean this one?

If so, yes I have Slick Slider working on a couple of custom WordPress themes using the CDN for both CSS and JS.

Could it be conflicting with another script?

-Rich

EDIT: Sample code added to comment below.

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

Austin Whipple
Austin Whipple
27,490 Points

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

Michael Escoto
Michael Escoto
30,028 Points

Hi Craig,

Not sure if you're still having this problem but I was having a similar issue. I found this article helpful: http://www.engagewp.com/custom-image-slider-with-advanced-custom-fields-and-slick/

I created a separate init file and switched to using the CDN for the JS files as the article suggests and it seemed to fix my problem.

Jonathon Hyland
Jonathon Hyland
5,016 Points

Rich Bagley I was looking through this for a wordpress site I'm trying to get this to work on. I have got it all working but it seems as thou the slick-theme.css isn't loading. Any ideas?