Sudo Slider jQuery Plugin - Nested sliders

Usage

This is everything you need.

Include the javascripts

<script type="Text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>

The Javascript to start it. (This script has to be below your CSS)

<script type="text/javascript" >
   $(document).ready(function(){   
      // Init
      $('.upBtn').stop().fadeOut(00);
      var sliderT = 0;
      
      var nestedSliderSettings = {
         prevNext: false,
         vertical:true,
         beforeAniFunc: function(t){ 
            sliderT = t;
         }
      };
      
      // Launching the nested sliders first, so the main slider doens't read an incorrect height. 
      var nestedSlider = new Array();
      nestedSlider[0] = $("#nested1").sudoSlider(nestedSliderSettings);
      nestedSlider[1] = $("#nested2").sudoSlider(nestedSliderSettings);
      nestedSlider[2] = $("#nested3").sudoSlider(nestedSliderSettings);
      
      var sudoSlider = $("#mainSlider").sudoSlider({
      });
      
      $('a.custom').live('click', function() {
         a = $(this).attr('rel');
         if (a) {
            for(var i=0;i<nestedSlider.length;i++)
            {
               nestedSlider[i].goToSlide(a);
            }
            if (sliderT == 3) $('.downBtn').fadeOut(800);
            else $('.downBtn').stop().fadeIn(800);
            
            if (sliderT == 1) $('.upBtn').stop().fadeOut(800);
            else $('.upBtn').stop().fadeIn(800);
         }
         return false;
      }); 
   });	
</script>

The CSS

.slider {
    width:696px;
   height:241px;
}
.slider img{
    border:none;
}
.slider ul, .slider li{
    position:relative;
    margin:0;
    padding:0;
    list-style:none;
}
.slider li { 
    width:696px;
   height:241px;
    overflow:hidden; 
}

.downBtn, .upBtn {
   left:318px;
   display:block;
   height:30px;
   width:77px;
   position:absolute;
   top:-30px;
   z-index:1000;
   background:url(../images/btn_down.gif) no-repeat 0 0;cursor:pointer;
}   
.downBtn {
   top:241px;
}                                          
.downBtn {
   background:url(../images/btn_up.gif) no-repeat 0 0;
}

The HTML

<div class="slider" id="mainSlider">
   <ul>
      <li>
         <div class="slider" id="nested1">
            <ul>            
               <li><img src="../images/02.jpg" alt="image description"/></li>
               <li><img src="../images/03.jpg" alt="image description"/></li>
               <li><img src="../images/04.jpg" alt="image description"/></li>
            </ul>
         </div>
      </li>
      <li>
         <div class="slider" id="nested2">
            <ul>            
               <li><img src="../images/03.jpg" alt="image description"/></li>
               <li><img src="../images/04.jpg" alt="image description"/></li>
               <li><img src="../images/05.jpg" alt="image description"/></li>         
            </ul>
         </div>
      </li>
      <li>
         <div class="slider" id="nested3">
            <ul>            
               <li><img src="../images/02.jpg" alt="image description"/></li>
               <li><img src="../images/05.jpg" alt="image description"/></li>         
               <li><img src="../images/01.jpg" alt="image description"/></li>
            </ul>
         </div>
      </li>
   </ul>
</div>