AnythingSlider playground

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

by Steven Senkus

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://css-tricks.github.io/AnythingSlider/css/theme-minimalist-round.css">
<br>

<ul id="slider">
    <li><img src="http://placekitten.com/900/400" alt="" /></li>
    <li><img src="http://placehold.it/900x400" alt="" /></li>
    <li><img src="http://placebear.com/900/400" alt="" /></li>
    <li><img src="http://lorempixel.com/900/400" alt="" /></li>
    <li><img src="http://placedog.com/900/400" alt="" /></li>
    <li>Lorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yadaLorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yadaLorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yadaLorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yada.  Lorem ipsum dolor yada yada, lorem ipsum dolor yada yada.<img src="http://stage.graphicproducts.com/images/label-printers/duralabel-pro-series/main/duralabel-pro-300.png" /></li>
    <li>
		<object width="940" height="529"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param...

CSS

/*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
.anythingWindow {
    border: none!important;
}

ul#slider, ul#slider li {
    width: 900px;
    height: 400px;
    list-style: none;
}

.anythingSlider-default .arrow {
    top: 0;
}
.anythingSlider-default .arrow a {
    width: 40px; /* reduce arrow width to 20px */
    height: 400px;
    /* background: #999; */
    background-image: none;
    color: white;
    margin: 0px 0px 0;
    text-decoration: none;
}




.anythingSlider-default .arrow a:hover {
    /* background: #ccc; */
}
/* reduce overall window left/right padding to 20px so arrows fit to sides*/
.anythingSlider-default {
    padding: 0 20px 28px 20px;
}

/* show default arrow text (forwardText & backText) */
.anythingSlider-default .arrow span {
    visibility: visible;
    position: relative;

}

.anythingSlider-default .arrow.forward span {
    display: block;
    height: 400px;
    background: url("http://images.apple.com/global/elements/arrows/paddle_next.png") no-repeat 0px
 50% scroll transparent;
    
}

.anythingSlider-default .arrow.back span {
    display: block;
    height: 400px;
    background: url("http://images.apple.com/global/elements/arrows/paddle_prev.png") no-repeat 0px
 50% scroll transparent;
    
}

JavaScript

$('#slider').anythingSlider({
	//theme: 'minimalist-round',
				// How long between slideshow transitions in AutoPlay mode (in milliseconds)
				delay: 2000,
				// Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
				resumeDelay: 1000,
				// How long the slideshow transition takes (in milliseconds)
				animationTime: 200,        
        
        
    // Link text used to move the slider forward
    // (hidden by CSS, replaced with arrow image)
    forwardText: "",
    // Link text used to move the slider back
    // (hidden by CSS, replace with arrow image)
    backText: ""
    
});

$('span.arrow').css({
    'height': 'inherit',
    'width': '40px',
    'margin': '3px 20px 0',
    'background-color': 'none'
});
$('span.arrow a').hide();
$('span.arrow.back').hover((function() {
    $('span.arrow.back a').stop(false, true).fadeIn(500);
}), (function() {
    $('span.arrow.back a').stop(false, true).fadeOut(500);
}));
$('span.arrow.forward').hover((function() {
    $('span.arrow.forward a').stop(false, true).fadeIn(500);
    
}), (function() {
    $('span.arrow.forward a').stop(false, true).fadeOut(500);
}));