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.
    – Johansson
    Feb 6, 2017 at 9:06
  • What are the console log errors (if any)?
    – Jami Gibbs
    Feb 6, 2017 at 13:32
  • There are no errors at all. I have already tried adding scripts to the header, still nothing works. Feb 6, 2017 at 19:35

3 Answers 3

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, 2017 at 7:48
  • Hmm. Try adding JQuery as a dependency as well?
    – Mario Vega
    Feb 6, 2017 at 10:19
  • That doesn't work either. Feb 6, 2017 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.