Clever Geek Handbook

LightSlider is not a function, wordpress

I am trying to add lightlider ( http://sachinchoolur.github.io/lightslider/index.html ) in WordPress but I got the error

Uncaught TypeError: jQuery(...).lightSlider is not a function(anonymous function) @ (index):99m.Callbacks.j @ jquery.js?ver=1.11.2:2m.Callbacks.k.fireWith @ jquery.js?ver=1.11.2:2m.extend.ready @ jquery.js?ver=1.11.2:2J @ jquery.js?ver=1.11.2:2

I am trying with the simplest example from their site

Html

<ul id="lightSlider">
  <li>
      <h3>First Slide</h3>
      <p>Lorem ipsum Cupidatat quis pariatur anim.</p>
  </li>
  <li>
      <h3>Second Slide</h3>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>
  <li>
      <h3>Third Slide</h3>
      <p>Lorem ipsum Excepteur amet adipisicing fugiat velit nisi.</p>
  </li>

</ul>

JavaScript

<script type="text/javascript">
//Also tried to add noConflict() function
//jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#lightSlider").lightSlider(); 

});
</script>

Can anyone help me? Thank!

+4


source to share


4 answers


I solved the problem. The problem is that after lightSlider.js some kind of jQuery loaded. I don't know how it happened, I just put jQuery to load first in wp_enqueue_script () before anything else (before css too) and lightslider.js at the end.



I hope this answer helps someone else. Thanks for the help.

+2


source


I had the same problem, but I fixed it. Just copy all the lightslider.js code and run it:



$(document).ready(function(){
   //code of lightslider 

});
+1


source


You have to install the dependency array('jquery')

to load jQuery first.

Example:

  wp_register_script( 'lightslider-js', get_stylesheet_directory_uri() . '/js/vendor/lightSlider/js/lightslider.min.js', array('jquery'), NULL, true );
+1


source


Add lazy load

<script src="js/lightslider.js defer"></script>
0


source






More articles:


All Articles