javascriptjqueryslidernivo-slider

Jquery conflicts between two sliders


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>

Solution

  • 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/