How to correctly load this jquery script through the file functions.php?

Question

i'm trying to include and correctly load the script goo.gl/QlJxbk on this wordpress website. I followed the doc http://webtechfreaky.github.io/Cloud-Pricing-Slider/docs/index.html to load correctly the script but as you can see something isn't working/loading correctly. As reported in the docs, the script have 2 columns, the right colum load correctly, the left column didn't, the preset selector stop to work, price is out of line and so on.

What i did is: load the script folder inside the folder theme, then enqueue CSS and Script on the file functions.php of the theme with following commands:

For the styles // Pricing slider style

    wp_enqueue_style( 'jquery-ui-full-style', get_template_directory_uri() . '/layout/assets/css/jquery-ui.min.css' , array(), '', 'all' );
    wp_enqueue_style( 'qs-slider-style', get_template_directory_uri() . '/layout/assets/css/slider.min.css' , array( 'jquery-ui-full-style' ), '', 'all' );

and for the scripts // Pricing slider script

        wp_enqueue_script( 'jquery-1.11.0', get_template_directory_uri() . '/layout/assets/js/jquery-1.11.0.min.js', array(), '', true );
        wp_enqueue_script( 'jquery-ui', get_template_directory_uri() . '/layout/assets/js/jquery-ui.js', array(), '', true );
        wp_enqueue_script( 'jquery-ui-min', get_template_directory_uri() . '/layout/assets/js/jquery-ui.min.js', array(), '', true );
        wp_enqueue_script( 'qs.slider.init', get_template_directory_uri() . '/layout/assets/js/qs.slider.init.js', array(), '', true );
        wp_enqueue_script( 'qs.slider', get_template_directory_uri() . '/layout/assets/js/qs.slider.js', array(), '', true );

Probably something is in conflict, or the array are not correctly declared, i'm not really able to figure what is going wrong on here. Any help is appreciated, thanks.

Answer 1

You don't need to include jquery-ui and jquery-ui.min either of them is sufficient . Also jquery and jquery-ui are already included in WordPress.

Try this

wp_enqueue_script( 'jquery');   
wp_enqueue_script( 'jquery-ui-core');   
wp_enqueue_script( 'qs.slider', get_template_directory_uri() . '/layout/assets/js/qs.slider.js', array('jquery','jquery-ui-core'), '', true );    
wp_enqueue_script( 'qs.slider.init', get_template_directory_uri() . '/layout/assets/js/qs.slider.init.js', array('jquery','jquery-ui-core'), '', true );

The above code will make sure jquery and jquery-ui is loaded before loading your slider.

Load the styles as you're already doing.

Please note that only loading these files will not do anything on its own you need to actually use the HTML markup provided by the author of this slider, refer to this source code. And customize the slider as per your needs and then add to your custom page.