Issues Adding a jQuery Image Slider

Question

I am trying to add a photo slider from Slick and I can't seem to get it to work.

HTML

<div class="victoria-slider">

        <div>Content1</div>
        <div>Content2</div>
        <div>Content3</div>
</div>

functions.php

function victoria_theme_script_enqueue() {

    wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/victoria_theme.css', array(), '4.7.2', 'all');

    wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.7', 'all');

    wp_enqueue_style('slick', 'http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css');

    wp_enqueue_style('slick-theme','http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css');



    wp_enqueue_script('jquery', get_template_directory_uri() .'/js/jquery.min.js', array(), '3.1.0', true);


    wp_enqueue_script('customjs', get_template_directory_uri() . '/js/victoria_theme.js', array(), '4.7.2', true);

    wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.7', true);
    wp_enqueue_script('slickjs', 'http://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js');




}


add_action(wp_enqueue_scripts, 'victoria_theme_script_enqueue');

JS

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



            jQuery(".victoria-slider").slick({
                  dots: true,
                  infinite: true,
                  speed: 500,
                  fade: true,
                  cssEase: 'linear',
                  slidesToShow: 3,
                  slidesToScroll: 3

            });


        });

I have tried using the files and links to get it working still no sign at all. Nothing is happening at all. I just don't know what else to do. It's for every slider I tried to add to my theme.

Answer 1

Two things to try:

• Move the enqueue for slick.js above the enqueue for your custom script.

• Declare Slick as a dependency for your custom script. Change the third parameter to include slickjs:

  wp_enqueue_script('customjs', get_template_directory_uri() . '/js/victoria_theme.js', array( 'slickjs' ), '4.7.2', true);
  

Answer 2

Would add this as a comment but not high enough reputation. Try removing the $ from the function($), I have had this cause unexpected issues in wordpress before

Answer 3

I figured it out! The problem was my theme JavaScript file not loading. I changed it from true to false and now I got it working!