Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Jquery cycle and nivo slider conflict WordPress

  • SOLVED

I want to use two sliders on one page, one is nivo slider which I use for image slides and jquery cycle for fadein news ticker.

Both are giving conflicts, is it possible to avoid them?

Answers (2)

2011-11-02

Fahad Murtaza answers:

can you show the demo? jQuery no conflict is the usual solution.


monti26 comments:

===========nivo slider code======================
jQuery(document).ready(function($) {
$('#slider').nivoSlider({
animSpeed:500, //Slide transition speed
pauseTime:3000,
directionNav:false,
pauseOnHover:false,
effect:'sliceDownLeft'
});
});

===========jquery cycle code======================

// testimonialshow
jQuery(document).ready( function(){

jQuery('#testimonialshow').after('<ul id="nav1">').cycle({
fx: 'fade',
speed: 'slow',
easing: 'easeInOutQuad',
timeout: 5000,
pager: '#nav1',

// callback fn that creates a thumbnail to use as pager anchor
pagerAnchorBuilder: function(idx, slide) {
return '<li><a href="#"></a></li>';
}

});
});

}


Fahad Murtaza comments:

I actually wanted to see the original working demo. I guess it has nothing to do with your code that you pasted here. Its something on the webpage where you are adding this. Like jQuery script being added two times on the same page.


Fahad Murtaza comments:

Try adding the following code to your html below where you add your jQuery script

<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>


For reference just check the first code example at

http://api.jquery.com/jQuery.noConflict/


monti26 comments:

I added jquery.noCOnflict();

Now the slider is working but my other script which takes scroll to top page does not work.

jQuery(document).ready(function($){
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
});

Any idea?


Fahad Murtaza comments:

Can you show me your webpage, so that I can have a look into it online.


monti26 comments:

ok, check here:
http://rockthemes.net/

Slider uses: Nivo script
Feedback box: Jquery cycle

Back to top bottom not working.

Both above slider script conflict solved by adding no conflict.

If you click on read more for inside sample page, you can see back to top at bottom works, but not on homepage.


monti26 comments:

Any idea?


Fahad Murtaza comments:

Nopes, not for back to the top.

2011-11-02

Grégory Viguier answers:

If you can, use NivoSlider for both your image slides and news ticker: NivoSlider has a fade effet too.


monti26 comments:

I will be providing two slides options in template, one will be jquery cycle and other will be nivo slider. And news/testimonial box will be fixed with jquery cycle.

So, one slider which is jqery cycle is working nice with news ticker cycle.

But another slider nivo is not working..