0

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.

Improve this question

1 Answer 1

Reset to default
0

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.

Improve this answer
15
  • With the modify that you suggested, all elements of the slide disappeared, there's only txt elements. I referred to the source code in HTML, author said to include line 49 > 150 and thats what i did, but this slide keep not loading properly. Commented Feb 11, 2017 at 23:06
  • Load the HTML markup where you're trying to show the slider, e.g. in a post edit screen click on text besides the visual tab and then add the HTML there, it should output the required slider in your post . Commented Feb 11, 2017 at 23:08
  • Before my modify, was the slider appearing ? Commented Feb 11, 2017 at 23:10
  • Yes, the slider loaded every "slide", but with some elements out of row. What you mean exactly for the HTML markup? Can you exactly refer lines of code of this source code? github.com/webtechfreaky/Cloud-Pricing-Slider/blob/master/… I've copied and pasted those lines github.com/webtechfreaky/Cloud-Pricing-Slider/blob/master/… Commented Feb 11, 2017 at 23:11
  • Thats how i see the slide now s27.postimg.org/jf95ro4jn/… and that's how should be raw.githubusercontent.com/webtechfreaky/Cloud-Pricing-Slider/… Commented Feb 11, 2017 at 23:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.