Setup

Wiki Pages: Home | Setup | Usage ( Appearance , Navigation , Slideshow , Callbacks & Events , Interactivity & Misc ) Change | Credits

Default Options

$('#slider1, #slider2').anythingSlider({
  // Appearance
  width               : null,      // Override the default CSS width
  height              : null,      // Override the default CSS height
  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
  tooltipClass        : 'tooltip', // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
  theme               : 'default', // Theme name
  themeDirectory      : 'css/theme-{themeName}.css', // Theme directory & filename {themeName} is replaced by the theme value above

  // Navigation
  startPanel          : 1,         // This sets the initial panel
  hashTags            : true,      // Should links change the hashtag in the URL?
  enableKeyboard      : true,      // if false, keyboard arrow keys will not work for the current panel.
  buildArrows         : true,      // If true, builds the forwards and backwards buttons
  toggleArrows        : false,     // if true, side navigation arrows will slide out on hovering & hide @ other times
  buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
  enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
  toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
  appendControlsTo    : null,      // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
  navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
  forwardText         : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText            : "«", // Link text used to move the slider back (hidden by CSS, replace with arrow image)

  // Slideshow options
  enablePlay          : true,      // if false, the play/stop button will still be visible, but not clickable.
  autoPlay            : true,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
  startStopped        : false,     // If autoPlay is on, this can force it to start stopped
  pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
  resumeOnVideoEnd    : true,      // If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video is complete
  stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page
  playRtl             : false,     // If true, the slideshow will move right-to-left
  startText           : "Start",   // Start button text
  stopText            : "Stop",    // Stop button text
  delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
  easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin

  // Callbacks
  onBeforeInitialize  : null,      // Callback before the plugin initializes
  onInitialized       : null,      // Callback when the plugin finished initializing
  onShowStart         : null,      // Callback on slideshow start
  onShowStop          : null,      // Callback after slideshow stops
  onShowPause         : null,      // Callback when slideshow pauses
  onShowUnpause       : null,      // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
  onSlideInit         : null,      // Callback when slide initiates, before control animation
  onSlideBegin        : null,      // Callback before slide animates
  onSlideComplete     : null,      // Callback when slide completes

  // Interactivity
  clickArrows         : "click",         // Event used to activate arrow functionality (e.g. "click" or "mouseenter")
  clickControls       : "click focusin", // Events used to activate navigation control functionality
  clickSlideshow      : "click",         // Event used to activate slideshow play/stop button

  // Misc options
  addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting, if swfobject.js is active
  maxOverallWidth     : 32766      // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
});

Setup

Add the following inside the <head></head> of your page

<!-- Required -->
<link type="text/css" href="css/anythingslider.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$(function () {
 $('#slider1').anythingSlider(); // add any non-default options here
});
</script>

<!-- Optional -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>

Example HTML

 <ul id="slider1">
  <li><div class="text">Put anything you want here</div></li>
  <li><img src="image1.jpg" /></li>
  <li><object>...</object></li>
  <li>
   <div class="list">
    <h4>Title</h4>
    <ul>
     <li>List item #1</li>
     <li>List item #2</li>
    </ul>
   </div>
  </li>
 </ul>