AnythingSlider playground

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

by avprod1

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">
<div id="footer">
  <a class="prev2" href="#">&lt;&lt;back</a>
  <div class="languageSliderContainer">
	  <div id="foo1">
		  <div><a class="btn btn_ltgrey btn_fixed"><span>English</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Espanol</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed" ><span>Deutsch</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed" ><span>Francais</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Italiano</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Portugues</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Japanese</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Chinese</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Vietnamese</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Erdu</span></a></div>
		  <div><a class="btn btn_ltgrey btn_fixed"><span>Korean</span></a></div>
	  </div>
	</div>

	<a class="next2" href="#">Fwd &gt;&gt;</a>
</div>

CSS

body {font-family: arial;}
/* anything slider traveler*/
/*style the footer container */
#footer {
	background-color: #E6E7E8;
	height: 72px;
	position: relative;
	width: 650px;
}

.anythingSlider-traveler {padding:0!important;}
.anythingSlider-traveler .anythingWindow {
	border-bottom: none !important;
	border-top: none !important;
}
/* override for fixed width button to fit horz slider on homepage*/
#foo1 div a.btn_fixed span {width: 92px;}



/* style prev and next buttons */
.prev2 {

    height: 55px;
    left: 8px;
    position: absolute;
    top: 8px;
    width: 55px;
    color: #ffffff;
    text-decoration: none;
    background-color: green;
}
.next2 {
    height: 55px;
    left: 591px;
    position: absolute;
    top: 8px;
    width: 55px;
    color: #ffffff;
    text-decoration: none;
    background-color: orange;
}

.languageSliderContainer {
    position: absolute;
    top: 0px;
    left: 75px;
    width: 512px; 
}
/*button layout */

a.btn {
    float: right;
    font-size: 20px;
    height: 38px;
    margin-right: 10px;
    margin-top: 11px;
    zoom: 1;
    padding: 13px 20px 0px 24px;
    text-decoration:none;
    color:#404040;
}
.btn span {
    display: inline-block;
    float: left;
    max-width: 207px;
    padding-right: 4px;
    white-space: normal;
}
.btn_fixed span {
    width: 100px;
    text-align:center;
}
a.btn_ltgrey {
    background: #f2f2f2; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #d6d6d6 100%); /* FF3.6+ */
    border: 1px solid #CCCCCC;
    color: #003399;
    padding: 12px 19px 0px 23px;
    height: 37px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
}

JavaScript

$('#foo1').anythingSlider({
        theme: "traveler",
        mode: "horizontal",
        buildStartStop: false,
        buildNavigation: false,
        buildArrows: false,
        expand: false,
        resizeContents: false,
        infiniteSlides: true,
        startPanel: 1,
        easing: "linear",
        hashTags: false,
        stopAtEnd: false,
        showMultiple: 3,
        changeBy: 2
    });

    $('.prev2').click(function () {
        $('#foo1').data('AnythingSlider').goBack();

    })
    $('.next2').click(function () {
        $('#foo1').data('AnythingSlider').goForward();

    })