Wp_localize_script from Shortcode

I’ve been trying for hours and tried several answers from here and Google but still no luck.. need help.

I am making a shortcode (slider) and trying to execute a javascript file (for the slider’s script) using parameters taken from shortcode’s attributes.

Read More
function slider_default($atts, $content) {
    extract(shortcode_atts(array(
      "animation" => '',
      "animationspeed" => '',
    ), $atts));

print_r($animation);
print_r($animationspeed);

//irrelevant 

    wp_enqueue_script('my-script', get_template_directory_uri() . '/script/' . 'custom-script.js');
    wp_localize_script('my-script', 'slider_vars', array(
      'animation' => $animation,
      'ssspeed' => $animationspeed
      )
    );

and in custom-script.js (it is loaded, and it is the correct file / address):

var $an = slider_vars.animation;
var $sss = slider_vars.ssspeed;

console.log($an);
console.log($sss);

jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: $an,
    slideshowSpeed: $sss,
  });
});

but it doesn’t work as expected.

print_r($animation) and print_r($animationspeed) results are as expected, but console.log($an) and console.log($sss) results are “fade” (without quotation) and blank, respectively.

What did I do wrong and in case this is not the correct way to achieve it, any pointers of what should I do?

Please help, thanks in advance.

Expected results is:
animation: “fade”, //String: Select your animation type, “fade” or “slide”. Either one, just need to be consistent with the vars below

and

slideshowSpeed: 7000, //Integer: Set the speed of the slideshow cycling, in milliseconds
animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds

So in code, it should be:

jQuery(window).load(function() {
  jQuery('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 600,
  });
});

and the shortcode:

[slider animation=slide slideshowspeed=600][/slider]

Hi guys, thanks and sorry for taking so long, I lost my internet connection after posting. Yes, it was typos, sorry, I’ve fixed it (I changed around and even trying things out even when it wasn’t working :P). It wasn’t a typo error, I’ve tried copy pasting and spelling them out.

More comment: Still struggling with my connection (I don’t think this is a CDN-loaded problem BTW, am using a local copy now and the slider actually works, just not as expected). For some reason I can’t leave a comment (“WordPress Answers requires external JavaScript from another domain, which is blocked or failed to load.”), so I will reply here and try to keep up.

@Helga: Yes, it shows and the JS file is loaded correctly (view source-d and clicked it)

It shows (strangely, twice) like this:

/* <![CDATA[ */
var slider_vars = {"animation":"fade","ssspeed":"5000"};
var slider_vars = {"animation":"fade","ssspeed":"4000"};
/* ]]> */

Not sure why it displayed twice, and not sure why it has two different values (maybe this is why ..?)

As for the animation-speed / slideshow speed, I changed things, but I’ve been consistent with the arrangement, slide – slideshowspeed and fade – animationspeed. Just change the value and the JS file (animationSpeed and slideshowSpeed).

Related posts