I am running a wordpress website which has a Nivoslider on it’s homepage. I had to use another plugin so for it to work, I needed to include jquery in the header.php file, inside the ‘head’ tags. Now when I am including the jquery files under <?php wp_head(); ?>
, the Nivo slider doesn’t work and gets stuck on the loading screen. I tried searching for this problem on the internet and tried a solution where I added the following code above <?php wp_head(); ?>
:
<?php
wp_deregister_script('jquery'); // Remove the default jQuery script
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false); // Register the Google hosted Version
wp_enqueue_script('jquery'); // Enqueue the Google Hosted version
?>
After adding this code above <?php wp_head(); ?>
, the first slide of the slider is only appearing now and I can’t switch between slides by clicking on the next/previous buttons. Also, when I remove the code <?php wp_head(); ?>
from the header.php file and add the jquery files, my other plugin starts to work fine but the slider stops working. I presume jquery is being loaded twice which is causing a conflict but I can’t seem to find that from where is the problem generating. Here’s my website on which I am running the Nivoslider and the other plugin: http://ignoremusic.com/
Error seen in JS console:
In wordpress you may experience some issues with the jquery version embedded in.
Instead of using :
try this :
Or you can use JQuery.noConflict()
http://api.jquery.com/jQuery.noConflict/
I’d personnaly embed the JS code of your slider in a noConflict() function.