AnythingSlider using jQuery

HTML

<div class="anythingSlider">
    
  <div class="wrapper">
  <ul>
  <li><img src="images/slide-civil-1.jpg" alt="" /></li>
  <li>
  
  <div id="textSlide">
  
  <img src="images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
  
  <h3>Queenie's Killer Tomato Bagel Sandwich</h3>
  
  <h4>Ingredients</h4>
 <ul>
  <li>1 bagel, split and toasted</li>
  <li>2 tablespoons cream cheese</li>
  <li>1 roma (plum) tomatoes, thinly sliced</li>
  <li>salt and pepper to taste</li>
  <li>4 leaves fresh basil</li>
  </ul>
 
  </div>
  
  </li>
  <li><img src="images/slide-env-1.jpg" alt="" /></li>
  <li><img src="images/slide-civil-2.jpg" alt=""  /></li>
  <li>
  <div id="quoteSlide">
  
  <blockquote>Life is conversational. Web design should be the same way. On the web, you&#8217;re talking to someone you&#8217;ve probably never met – so it&#8217;s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
  <p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
  
  </div>
  </li>
  <li><img src="images/slide-env-2.jpg" alt="" /></li>
  </ul> 
  </div>
  
  </div>

CSS

.anythingSlider                         { width: 760px; height: 360px; position: relative; }
.anythingSlider .wrapper                { width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; }

                                       /* Width below is max for Opera */
.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #eee; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; }
.anythingSlider ul li                   { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }


#thumbNav                               { position: relative; top: 323px; text-align: center; }
#thumbNav a                             { color: black; font-size: 13px; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(jquery/jquery-anything-slider/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover                       { background-image: none; }
#thumbNav a.cur                         { background: #e0a213; }

#start-stop                             { background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { background-color: red; }
#start-stop:hover                       { background-image: none; }

/*
  Prevents
*/
.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }

JavaScript

function formatText(index, panel) {
		  return index + "";
	    }
    
        $(function () {
        
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 3000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        		startText: "Go",             // Start text
		        stopText: "Stop",               // Stop text
		        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
            
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
            
        });

jquery.min.js

Click to Download

jquery.easing.1.2.js

Click to Download

jquery.anythingslider.js

Click to Download

Example

Click to DEMO