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><div><span>1</span><img src="http://placekitten.com/920/434" alt="" /></div></li>
    <li><div><span>2</span><img src="http://placehold.it/920x434" alt="" /></div></li>
    <li><div><span>3</span><img src="http://ipsumimage.appspot.com/920x434.png" alt="" /></div></li>
    <li><div><span>4</span><img src="http://dummyimage.com/920x434/000/fff.jpg" alt="" /></div></li>
    <li><div><span>5</span><img src="http://placekitten.com/920/434" alt="" /></div></li>
    <li><div><span>6</span><img src="http://placehold.it/920x434" alt="" /></div></li>
    <li><div><span>7</span><img src="http://ipsumimage.appspot.com/920x434.png" alt="" /></div></li>
    <li><div><span>8</span><img src="http://dummyimage.com/920x434/000/fff.jpg" alt="" /></div></li>
    <li><div><span>9</span><img src="http://placekitten.com/920/434" alt="" /></div></li>
    <li><div><span>10</span><img src="http://placehold.it/920x434" alt="" /></div></li>
    <li><div><span>11</span><img src="http://ipsumimage.appspot.com/920x434.png" alt="" /></div></li>
    <li><div><span>12</span><img src="http://dummyimage.com/920x434/000/fff.jpg" alt="" /></div></li>
    <li><div><span>13</span><img src="http://placekitten.com/920/434" alt="" /></div></li>
    <li><div><span>14</span><img src="http://placehold.it/920x434" alt="" /></div></li>
    <li><div><span>15</span><img src="http://ipsumimage.appspot.com/920x434.png" alt=""...

CSS

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

/* extend slider past Opera max width limit
slide 36 would be on the next row without this change
(except in Opera of course)
*/
.anythingBase { max-width: 99999px; }

.panel div { width: 100%; height: 100%; position: relative; left: 0; top: 0; }
.panel span { position: absolute; top: 10%; left: 40%; color: #f00; font-size: 160px; }

JavaScript

$('#slider').anythingSlider({
    startPanel: 35,
    resizeContents: true,
    hashTags: false,
    animationTime: 750,
    easing: "easeInOutExpo",
    autoPlay: false,
    infiniteSlides: false,
    stopAtEnd: true,
    navigationSize: 10,
    onInitialized: function(e,slider){
        slider.navWindow(slider.currentPage);
    },
    onSlideComplete: function(slider) {
        slider.navWindow(slider.currentPage);
    },
});