AnythingSlider playground

Add, remove, adjust any or all options so you can see how it works.

by Mottie

HTML

<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/swfobject.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.fx.js"></script>
<script src="http://css-tricks.github.com/AnythingSlider/js/jquery.anythingslider.video.js"></script>
<ul id="slider"> 
  <li class="panel1"> 
   <div class="textSlide"> 
    <img src="http://css-tricks.github.com/AnythingSlider/demos/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 class="panel2"> 
   <div class="quoteSlide"> 
    <blockquote>In awe I watched the waxing moon ride across the zenith of 
     the heavens like an ambered chariot towards the ebon void of infinite space 
     wherein the tethered belts of Jupiter and Mars hang forever festooned in  
     their orbital majesty. And as I looked at all this I thought... I must put 
     a roof on this lavatory.<br>-- Les Dawson</blockquote> 
   </div> 
  </li> 
  <li class="panel3"> 
   <img class="expand" src="http://css-tricks.github.com/AnythingSlider/demos/images/slide-tele-1.jpg" alt=""> 
  </li> 
 </ul>

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
#slider { 
  width: 500px; 
  height: 350px; 
  list-style: none; 
}

/* Set slider2 panel sizes, Main & FX demo pages */
#slider .panel1 { width: 500px; height: 350px; }
#slider .panel2 { width: 450px; height: 420px; }
#slider .panel3 { width: 400px; height: 250px; }

/* For Specific Slides, these also apply to FX demo pages */
.textSlide             { padding: 10px 30px; }
.textSlide h3          { font: 20px Georgia, Serif; }
.textSlide h4          { text-transform: uppercase; font: 15px Georgia, Serif; margin: 10px 0; }
.textSlide ul          { list-style: disc; margin: 0; padding-left: 20px; }
.textSlide ul li       { display: list-item; }
.rightside             { float: right; margin: 0 0 2px 10px; }

.quoteSlide            { padding: 20px; }
.quoteSlide blockquote { font: italic 24px/1.5 Georgia, Serif; text-align: center; color: #444; margin: 0 0 10px 0; }
.quoteSlide p          { text-align: center; }

JavaScript

var fxtime = 1000,
    dist = 300,
    element = 'h3';

$('#slider').anythingSlider({
    resizeContents: false,
    navigationFormatter: function(i, panel) {
        return ['Recipe', 'Quote', 'Image'][i - 1];
    },

    // custom FX animation
    onInitialized: function(e, slider) {
        // this could be in the css; but added here for emphasis
        slider.$el.find(element).css('position', 'relative');
        // move title to starting position, if not in view
        slider.$currentPage.siblings().find(element).css({
            top: '-' + dist + 'px'
        });
    },

    onSlideInit: function(e, slider) {
        var $elnext = slider.$targetPage.find(element),
            $ellast = slider.$lastPage.find(element);
        if ($elnext.length) {
            $elnext
                .css({ top: '-' + dist + 'px' })
                // animate element into it's final position
                .animate({ top: 0 }, fxtime);
        }
        if ($ellast.length) {
            // animate element out of view (down, then reset it to the top when finished)
            $ellast.animate({ top: dist + 'px' }, fxtime, function() {
                $ellast.css({ top: '-' + dist + 'px' });
            });
        }
    }
});