Jquery conflicts between two sliders

Question

I'm just trying to develop one simple responsive site in which I've used two sliders. One Nivo Slider at the beginning and another Review slider. But it outputs only the second slider. My first slider doesn't work. Any help would be appreciated. I've changed $ into jQuery. My code of the first and second slider goes like this:

NIVO SLIDER:

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
 <script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
 <script type="text/javascript" src="js/menu.js"></script> 
 <script type="text/javascript">
 jQuery(window).load(function() {
 jQuery('#slider').nivoSlider();
 });
 </script>

RESPONSIVE REVIEW SLIDER

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
 <script type="text/javascript" src="js/responsiveslides.min.js"></script>
 <script>
 jQuery(function () {
 jQuery("#sliderr1").responsiveSlides({
 auto: true,
 speed: 500,
 namespace: "callbackss",
 pager: true,
 });
 });
 </script>

Looks like you're including two versions of jQuery, try removing the 1.8.3 version. It may not solve the issue, but it's much better in the long run. — Rory McCrossan

MinusFour MinusFour · Accepted Answer · 2015-08-03T13:27:42

If you truly need to use 2 jQuery versions, your best approach is to use jQuery.noConflict()... you probably could do it with one version though.

https://api.jquery.com/jquery.noconflict/

Jquery conflicts between two sliders

1 Answers