AnythingSlider playground

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

by Mottie

HTML

<script src="http://proloser.github.com/AnythingSlider/js/jquery.anythingslider.js"></script>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider.css">
<script src="http://proloser.github.com/AnythingSlider/js/jquery.easing.1.2.js"></script>
<script src="http://proloser.github.com/AnythingSlider/js/swfobject.js"></script>
<div id="externalNav">
Goto <a href="#1">One</a> |
     <a href="#2">Two</a> |
     <a href="#3">Three</a> |
     <a href="#4">Four</a>
</div>

<br><br>
<ul id="result">
    <li>...</li><li>...</li><li>...</li><li>...</li>
</ul>
<br><br>

<ul id="slider">
    
    <li><img src="http://placekitten.com/300/200" alt="" /></li>
    
    <li><img src="http://placehold.it/300x200" alt="" /></li>
    
    <li><img src="http://ipsumimage.appspot.com/300x200.png" alt="" /></li>
    
    <li><img src="http://dummyimage.com/300x200/000/fff.jpg" alt="" /></li>
    
</ul>

<!-- Add stylesheets here -->
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/theme-metallic.css">
<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://proloser.github.com/AnythingSlider/css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
#slider {
    width: 300px;
    height: 200px;
    list-style: none;
}

JavaScript

var t, result = $('#result');

$('#slider')
    .anythingSlider({

        // if false, the slider will not wrap
        infiniteSlides: false
    })
    .bind('slide_init slide_complete', function(e,slider){
        t = '<li>' + e.type + ': current = ' + slider.currentPage +
            ', target = ' + slider.targetPage;
        result
            .append(t)
            .find('li:first').remove();
    });

// set up external links
$('#externalNav a').click(function(){
    var slide = $(this).attr('href').substring(1);
    $('#slider').anythingSlider(slide);
    return false;
});