title: How can have 2 jquery slider plugins (different in functionality) on the same web page?
body: <p>I am currently trying to come up with a website with 2 jquery slider plugins, these sliders have differing ways they function but I have failed. I have implemented both slides separately before and they function well in all browsers but not when I try to implement them on the same page, only the easy  slider will work but not the nivo slider. </p>
  
  <p>I have tried searching for some clues online but am sure my being a newbie in jQuery or even java has led me to not finding the answer to my problem and to be realistic, I have tried most solutions they offer but in vain. Especially the "no conflict" line of code thus my cry out here.</p>
  
  <p>This is my jQuery code as is in the site: </p>
  
  <pre><code>&lt;script type="text/javascript" src="jquery 1.2.3.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.nivo.slider.pack.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(window).load(function() {
      $('#slider').nivoSlider();
  });
  &lt;/script&gt;
  
  &lt;script type="text/javascript" src="easySlider1.7.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
          $(document).ready(function(){   
              $("#slider2").easySlider({
                  auto: true, 
                  continuous: true
              });
          }); 
      &lt;/script&gt;
  </code></pre>
  
  <p>This is what firebug shows me:</p>
  
  <pre><code>Webpage error details
  
  Message: 'undefined' is null or not an object
  Line: 12
  Char: 388
  Code: 0
  URI: file:///D:/...../jquery.nivo.slider.pack.js
  </code></pre>
  
  <p>The entire line 12 code below as is in the file <code>jquery.nivo.slider.pack.js</code>:</p>
  
  <pre><code>Math.round(e.width()/f.slices);k==f.slices-1?e.append(a('&lt;div class="nivo-slice"&gt;&lt;/div&gt;').css({left:p*k+"px",width:e.width()-p*k+"px"})):e.append(a('&lt;div class="nivo-slice"&gt;&lt;/div&gt;').css({left:p*k+"px",width:p+"px"}))}e.append(a('&lt;div class="nivo-caption"&gt;&lt;p&gt;&lt;/p&gt;&lt;/div&gt;').css({display:"none",opacity:f.captionOpacity}));if(g.currentImage.attr("title")!=""){k=g.currentImage.attr("title");if(k.substr(0,1)=="#")k=a(k).html();a(".nivo-caption p",e).html(k);a(".nivo-caption",e).fadeIn(f.animSpeed)}var l=
  </code></pre>
  
  <p>Things to note: </p>
  
  <ul>
  <li>When I try to use the latest jquery then the easy slider gets messed up</li>
  <li>I decided not to add the <code>&lt;script src="http://ajax.googleapis.com  /ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;</code> since it would be repeating of the jquery call... </li>
  <li>The 2 sliders in question are; the nivo image slider and the other an easy slider for news that keeps sliding to the left or even right since its got the next &amp; previous buttons... </li>
  </ul>
  
  <p>Any kind of help is welcome.</p>