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="" /></li>
    <li><img src="http://placehold.it/300x200" alt="" /></li>
    <li><img src="http://placebear.com/300/200" alt="" /></li>
    <li><img src="http://lorempixel.com/300/200" alt="" /></li>
    <li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>

<ul class="nav">
    <li><a data-slide="1" target="_blank" href="http://www.google.com">1</a></li>
    <li><a data-slide="2" target="_blank" href="http://www.yahoo.com">2</a></li>
    <li><a data-slide="3" target="_blank" href="http://www.bing.com">3</a></li>
    <li><a data-slide="4" target="_blank" href="http://www.duckduckgo.com">4</a></li>
    <li><a data-slide="5" target="_blank" href="http://www.ask.com/">5</a></li>
    <li><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;
}

.nav {
    width: 100px;
    margin: 0 auto;
    text-align: center;
}

JavaScript

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

$('ul.nav a').bind('mousemove', function(e) {
    // get slide number
    var h = $(this).attr('data-slide');
    // external links will fall through and go to the external url
    if (h) {
        $('#slider').anythingSlider(h);
    }
});