title: Multiple Jquery Sliders on one page
body: <p>I am using the jquery plugin, <a href="http://slidesjs.com/" rel="nofollow">slides</a> to power my slider. I want to have 3 sliders on my page, only one showing at all times. I have three buttons which cycle through the sliders. THe following is the html and jquery for my buttons:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul class="tabs"&gt;
              &lt;li&gt;&lt;a href="#tab1"&gt;Slider 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab2"&gt;Slider 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tab3"&gt;Slider 3&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code> $(".tab_content").hide();
                  $("ul.tabs li:first").addClass("active").show(); 
                  $(".tab_content:first").show(); 
  
                  $("ul.tabs li").click(function() {
  
                      $("ul.tabs li").removeClass("active"); 
                      $(this).addClass("active"); 
                      $(".tab_content").slideUp(600);
  
                      var activeTab = $(this).find("a").attr("href"); 
                      $(activeTab).fadeIn(3500); 
                      return false;
                  });
  </code></pre>
  
  <p>You can view a working demo of the page here: <a href="http://vitaminjdesign.com/example/examples/Standard/index.html" rel="nofollow">http://vitaminjdesign.com/example/examples/Standard/index.html</a></p>
  
  <p>As you can see, it works, but not well. The jquery that hides each slider on click works but I feel like there is a much better solution. On page load, all three sliders are loading (two hidden). Is this an OK practice? </p>
  
  <p>Is there a better way to handle three sliders than the way I am using it? Or perhaps you have some tips or tricks to make this a lot cleaner and better transitioning between the slides? Thanks in advance.</p>