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><img src="http://placekitten.com/400/300" alt="" /><div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div></li>
     
     <li><img src="http://placehold.it/400x300" alt="" /><div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div></li>
     
     <li><img src="http://lorempixel.com/300/200" alt="" /><div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div></li>
    
     <li><img src="http://placedog.com/400/300" alt="" /><div class="caption">Curabitur sapien urna, scelerisque at vehicula et, rutrum sit amet leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</div></li>
     
</ul>

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/

 /* New in version 1.7+ */
  ul#slider {
   width: 400px;
   height: 300px;
   list-style: none;
  }
  /* images with caption */
  ul#slider img {
   width: 100%;
   height: 100%;
  }
  /* position the panels so the captions appear correctly */
  ul#slider .panel { position: relative; }
  /* captions */
  ul#slider .caption-top, #slider .caption-right,
  ul#slider .caption-bottom, #slider .caption-left {
   background: #000;
   color: #fff;
   padding: 10px;
   margin: 0;
   position: relative;
   z-index: 10;
   opacity: .8;
   filter: alpha(opacity=80);
  }



ul#slider li {
    position: relative;
}

.caption {
    width: 400px;
    height: 50px;
    margin: 0 auto;
    padding: 10px 0;
    border-top: yellow 5px solid; /* adjust border color and size here */
    text-align: center;
    background: rgba(80,80,80,.5); /* adjust caption background color here */
    color: #ddd;
    position: absolute;
    bottom: 0;
    left: 0;
    cursor: pointer;
}

JavaScript

// caption toggle animation time
var toggleTime = 500,
    // always show caption when slide comes into view
    showCaptionInitially = true,

    updateCaption = function(slider, init) {
        if (init && showCaptionInitially) {
            setTimeout(function() {
                slider.$targetPage.find('.caption').animate({
                    bottom: 0
                }, toggleTime);
            }, slider.options.delayBeforeAnimate + toggleTime);
        } else if (!init) {
            var cap = slider.$lastPage.find('.caption');
            cap.css('bottom', -cap.innerHeight());
        }
    };

$('#slider').anythingSlider({
    //    buildNavigation    : false,
    // *********** Callbacks ***********
    // Callback when the plugin finished initializing
    onInitialized: function(e, slider) {
        slider.$items.each(function() {
            var cap = $(this).find('.caption');
            cap.css('bottom', -cap.innerHeight()).click(function() {
                cap.animate({
                    bottom: (cap.css('bottom') === "0px" ? -cap.innerHeight() : 0)
                }, toggleTime);
            });
        });
        updateCaption(slider, true);
    },

    // Callback before slide animates
    onSlideBegin: function(e, slider) {
        updateCaption(slider, true);
    },

    // Callback after slide animates
    onSlideComplete: function(slider) {
        updateCaption(slider, false);
    }

});