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>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css">
<ul id="slider">

    <li>
        <img src="http://placekitten.com/300/200" alt="" />
        <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
        <a href="#4">4</a> <a href="#5">5</a>
        <a href="http://www.google.com">Google</a>
    </li>

    <li>
        <img src="http://placehold.it/300x200" alt="" />
        <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
        <a href="#4">4</a> <a href="#5">5</a>
        <a href="http://www.google.com">Google</a>
    </li>

    <li>
        <img src="http://placebear.com/300/200" alt="" />
        <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
        <a href="#4">4</a> <a href="#5">5</a>
        <a href="http://www.google.com">Google</a>
    </li>

    <li>
        <img src="http://lorempixel.com/300/200" alt="" />
        <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
        <a href="#4">4</a> <a href="#5">5</a>
        <a href="http://www.google.com">Google</a>
    </li>

    <li>
        <img src="http://placedog.com/300/200" alt="" />
        <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a>
        <a href="#4">4</a> <a href="#5">5</a>
        <a href="http://www.google.com">Google</a>
    </li>

</ul>

CSS

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

JavaScript

$('#slider').anythingSlider({
    buildNavigation: false,
    buildStartStop: false,
    buildArrows: false
});

$('#slider li a').click(function(){
    var h = this.hash;
    // external links will fall through and go to the external url
    if (/#\d/.test(h)) {
        $('#slider').anythingSlider(h.substring(1));
        return false;
    }
});