Hey. I’m not great with jQuery so bear with me. I’m trying to get a content slider working in Wordpress. The slider is http://liquidslider.com/ and it’s working fine for me on the static version of my site. When I try to implement it in Wordpress it just doesn’t work. The latest jQuery is loaded (once) and it’s creating the html elements it needs to function but that’s it.
I’m pretty sure it has something to do with this:
jQuery(document).ready(function($) {
$(function(){
$('#slider-id').liquidSlider();
});
});
But don’t know what exactly. I’ve kind of run out of options so I’d appreciate any help at all.
Here’s the slider isolated:
http://www.xnthony.com/xnto/
Hi there,
Welcome to the forums 
When I look at the page that you link to, the first thing I notice are two 404 errors and a JavaScript error.
404
Failed to load resource: the server responded with a status of 404 (Not found) http://www.xnthony.com/xnto/wp-content/themes/xnthony/img/menu.png
Failed to load resource: the server responded with a status of 404 (Not found) http://www.xnthony.com/xnto/wp-content/themes/xnthony/img/arrow.png
JS
Uncaught TypeError: Cannot read property 'fn' of undefined bootstrap-collapse.js:105
The JS error is being caused by the fact that you have included it on the page before jQuery (hence $.fn being undefined).
Fix those errors and see if that helps any.
Thanks for the response!
I moved the jQuery to be loaded before that script and it fixed that error, but not the slider problem. I don’t think it has to do with the bootstrap scripts. I’m pretty sure it has to do with how I’m calling the function in the head (posted above). I know I have to call it differently in Wordpress so I’ve done it as recommended, but still no luck.
Pretty stumped.
Can you fix the 404 errors, too?
Sometimes these will cause a script to stop executing.
I’ve fixed those errors, but still no luck.
No worries, we’ll get there
Next thing is that you have included jQuery twice on the page, once in line 17 and once in line 55.
Could you remove the second version?
Hmm, okay so I removed the second version. That version was being enqueued in my functions.php file along with the slider scripts. I’ve removed these lines and placed those slider scripts in the head.
Now it’s saying "Uncaught TypeError: Object [object Object] has no method ‘liquidSlider’ "; though the liquidSlider script is loaded (on line 45). And it’s also throwing the error about the bootstrap script again.
Oh dear!
Well, one thing at a time, can you sort out the Bootstrap error (just swap the order of the scripts as before).
Hi,
You’re still including jQuery twice.
Once in line 17, once in line 58.
Oops, sorry. I think you caught it between edits. It’s there once now.
Also, no errors anymore. But still not working.
OK, well, two things.
Change this:
jQuery(document).ready(function($) {
$(function(){
$('#slider-id').liquidSlider();
});
});
to this:
jQuery(document).ready(function($) {
$('#slider-id').liquidSlider();
});
Then delete everything between your <body> tags (temporarily!!) and replace it with the following:
<div class="liquid-slider" id="slider-id">
<div>
<h2 class="title">Slide 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
<div>
<h2 class="title">Slide 2</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
</div>
<div>
<h2 class="title">Slide 3</h2>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div>
<h2 class="title">Slide 4</h2>
<p>Proin nec turpis eget dolor dictum lacinia. Nullam nunc magna, tincidunt eu porta in, faucibus sed magna. Suspendisse laoreet ornare ullamcorper. Nulla in tortor nibh. Pellentesque sed est vitae odio vestibulum aliquet in nec leo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet purus lectus. Maecenas tempor ornare sollicitudin.</p>
</div>
</div>
Let me know when you’ve done that.
Hey. I was doing as you suggested and in the process happened to randomely hover above an area on the page and click and the slider moved. The controls were located outside of where they should have been.
This happened because I’d removed all of the slider options I’d implemented from before in order to get it working. But then when it was working I forgot to re-include them so the arrows controlled the slider.
So stupid. Haha.
Thanks so much for you’re help. You’re a lifesaver.
No probs, glad it’s working now