0

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.

3
  • Have you tried adding the script directly in your header.php for debug purpose? And if there is an error log or link to your website, please share it with us.
    – Jack Johansson
    Feb 6 '17 at 9:06
  • What are the console log errors (if any)?
    – Jami Gibbs
    Feb 6 '17 at 13:32
  • There are no errors at all. I have already tried adding scripts to the header, still nothing works. Feb 6 '17 at 19:35
0

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);
    
3
  • It doesn't work Feb 6 '17 at 7:48
  • Hmm. Try adding JQuery as a dependency as well?
    – Mario Vega
    Feb 6 '17 at 10:19
  • That doesn't work either. Feb 6 '17 at 19:33
0

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

1
0

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.