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>
        <p>
            <img alt="" src="http://placekitten.com/582/255">
        </p>
        <div class="container"> <a href="" class="info">Info</a>

            <p style="color:#555555;text-align:center">text</p>
        </div>
    </li>
    <li>
        <p>
            <img alt="" src="http://placekitten.com/582/255">
        </p>
        <div class="container"> <a href="" class="info">Info</a>

            <p style="color:#555555;text-align:center">text</p>
        </div>
    </li>
    <li>
        <p>
            <img alt="" src="http://placekitten.com/582/255">
        </p>
        <div class="container"> <a href="" class="info">Info</a>

            <p style="color:#555555;text-align:center">text</p>
        </div>
    </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: 589px;
    height: 296px;
    list-style: none;
}

.anythingSlider.anythingSlider-default .arrow.forward a {
    background:url(http://lorenzoraffio.com/images/next.png) no-repeat left top;
    right:6px;
}
.anythingSlider.anythingSlider-default .arrow.back a {
    background:url(http://lorenzoraffio.com/images/prev.png) no-repeat left top;
}
.anythingSlider a {
    color:#706b6b;
}
.anythingSlider a.info {
    background:url(http://lorenzoraffio.com/images/marker1.png) no-repeat left 1px;
    text-decoration:none;
    padding-left:20px;
    float:right;
}

.anythingSlider a.info {
    background:url(http://lorenzoraffio.com/images/marker1.png) no-repeat left 1px;
    text-decoration:none;
    padding-left:20px;
    float:right;
}
.anythingSlider a.info:hover {
    text-decoration:underline;
    color:#000;
}
.anythingSlider p {
    margin-bottom:0;
}
.anythingSlider .container {
    padding:8px 25px 0 22px;
    width:auto;
}

JavaScript

function formatText(index, panel) {
    return index + "";
}

$(function () {

    $('#slider').anythingSlider({
        easing: "easeInOutExpo", // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true, // This turns off the entire FUNCTIONALY, not just if it starts running or not.
        delay: 5000, // How long between slide transitions in AutoPlay mode
        startStopped: false, // If autoPlay is on, this can force it to start stopped
        animationTime: 600, // How long the slide transition takes
        hashTags: true, // Should links change the hashtag in the URL?
        buildStartStop: false,
        buildNavigation: false, // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true, // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Go", // Start text
        stopText: "Stop", // Stop text
        navigationFormatter: formatText // Details at the top of the file on this use (advanced use)
    });

    $("#slide-jump").click(function () {
        $('.anythingSlider').anythingSlider(5);
    });

});