Enqueue the script as you would normally, & then call the JS function right after the slider HTML output (or on wp_footer
), and pass a JSON config back to the function.
<!-- slider HTML -->
<script type="text/javascript">
jQuery( "#my_slide" ).mySlider(
<?php echo json_encode( $my_config /* array or object of arguments */ ) ?>
);
</script>
Alternatively, enter wp_localize_script
:
wp_enqueue_script( 'my-slider', plugins_url( 'js/slider.js', __FILE__ ), array( 'jquery' ) );
wp_localize_script( 'my-slider', 'My_Slider', array(
'somevar' => get_option( 'my_var' ),
));
This’ll output in the head something like:
<script type="text/javascript">My_Slider = { "somevar": "value of get_option( 'my_var' )" }</script>
<script type="text/javascript" src="http://example.com/wp-content/plugins/my-slider/js/slider.js"></script>
See how you now have access to the JS global My_Slider
?