Setup

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

##Sections

Default Options
Setup – Standard Page
Setup – Movable Type
Setup – Wordpress
Using jQuery 1.3.2 - No longer supported!

##Default Options

$('#slider').anythingSlider({
  // Appearance
  theme               : "default", // Theme name
  expand              : false,     // If true, the entire slider will expand to fit the parent element
  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
  showMultiple        : false,     // Set this value to a number and it will show that many slides at once
  easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin or jQuery UI

  buildArrows         : true,      // If true, builds the forwards and backwards buttons
  buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
  buildStartStop      : true,      // If true, builds the start/stop button and adds slideshow functionality

  appendForwardTo     : null,      // Append forward arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendBackTo        : null,      // Append back arrow to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendControlsTo    : null,      // Append controls (navigation + start-stop) to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendNavigationTo  : null,      // Append navigation buttons to a HTML element (jQuery Object, selector or HTMLNode), if not null
  appendStartStopTo   : null,      // Append start-stop button to a HTML element (jQuery Object, selector or HTMLNode), if not null

  toggleArrows        : false,     // If true, side navigation arrows will slide out on hovering & hide @ other times
  toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times

  startText           : "Start",   // Start button text
  stopText            : "Stop",    // Stop button text
  forwardText         : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText            : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
  tooltipClass        : "tooltip", // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)

  // Function
  enableArrows        : true,      // if false, arrows will be visible, but not clickable.
  enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
  enableStartStop     : true,      // if false, the play/stop button will still be visible, but not clickable. Previously "enablePlay"
  enableKeyboard      : true,      // if false, keyboard arrow keys will not work for this slider.

  // Navigation
  startPanel          : 1,         // This sets the initial panel
  changeBy            : 1,         // Amount to go forward or back when changing panels.
  hashTags            : true,      // Should links change the hashtag in the URL?
  infiniteSlides      : true,      // if false, the slider will not wrap & not clone any panels
  navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
  navigationSize      : false,     // Set this to the maximum number of visible navigation tabs; false to disable

  // Slideshow options
  autoPlay            : false,     // If true, the slideshow will start running; replaces "startStopped" option
  autoPlayLocked      : false,     // If true, user changing slides will not stop the slideshow
  autoPlayDelayed     : false,     // If true, starting a slideshow will delay advancing slides; if false, the slider will immediately advance to the next slide when slideshow starts
  pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
  stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
  playRtl             : false,     // If true, the slideshow will move right-to-left

  // Times
  delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  resumeDelay         : 15000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
  animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
  delayBeforeAnimate  : 0,         // How long to pause slide animation before going to the desired slide (used if you want your "out" FX to show).

  // Callbacks
  onBeforeInitialize  : function(e, slider) {}, // Callback before the plugin initializes
  onInitialized       : function(e, slider) {}, // Callback when the plugin finished initializing
  onShowStart         : function(e, slider) {}, // Callback on slideshow start
  onShowStop          : function(e, slider) {}, // Callback after slideshow stops
  onShowPause         : function(e, slider) {}, // Callback when slideshow pauses
  onShowUnpause       : function(e, slider) {}, // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
  onSlideInit         : function(e, slider) {}, // Callback when slide initiates, before control animation
  onSlideBegin        : function(e, slider) {}, // Callback before slide animates
  onSlideComplete     : function(slider) {},    // Callback when slide completes; this is the only callback without an event "e" variable

  // Interactivity
  clickForwardArrow   : "click",         // Event used to activate forward arrow functionality (e.g. add jQuery mobile's "swiperight")
  clickBackArrow      : "click",         // Event used to activate back arrow functionality (e.g. add jQuery mobile's "swipeleft")
  clickControls       : "click focusin", // Events used to activate navigation control functionality
  clickSlideshow      : "click",         // Event used to activate slideshow play/stop button

  // Video
  resumeOnVideoEnd    : true,      // If true & the slideshow is active & a supported video is playing, it will pause the autoplay until the video is complete
  addWmodeToObject    : "opaque",  // If your slider has an embedded object, the script will automatically add a wmode parameter with this setting
  isVideoPlaying      : function(base){ return false; } // return true if video is playing or false if not - used by video extension
});

##Setup - Standard Page

Add the following inside the `<head></head>` of your page. Note: AnythingSlider requires jQuery 1.4+ to work properly.

<!-- jQuery (required) -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

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

<!-- Anything Slider -->
<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>

<!-- Add the stylesheet(s) you are going to use here. All stylesheets are included below, remove the ones you don't use. -->
<link rel="stylesheet" href="css/theme-metallic.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-minimalist-round.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-minimalist-square.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-construction.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/theme-cs-portfolio.css" type="text/css" media="screen" />

<!-- AnythingSlider optional extensions -->
<script src="js/jquery.anythingslider.fx.js"></script>
<script src="js/jquery.anythingslider.video.js"></script>

<!-- Older IE stylesheet, to reposition navigation arrows, added AFTER the theme stylesheet above -->
<!--[if lte IE 7]>
<link rel="stylesheet" href="css/anythingslider-ie.css" type="text/css" media="screen" />
<![endif]-->

<!-- Required -->
<script type="text/javascript">
$(function(){
 $('#slider').anythingSlider(); // add any non-default options here
});
</script>

Example HTML

 <ul id="slider">
  <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>

or in AnythingSlider version 1.5.19+ this HTML will work:

<div id="slider">
  <div><!-- slide content --></div>
  <div><!-- slide content --></div>
  <div><!-- slide content --></div>
</div>

##Setup - Movable Type

Ken Edwards (meancode) made a plugin to make it easy to install and use AnythingSlider!
Follow the Installation and plugin setup sections in the mt-plugin-anythingslider readme.

##Setup - Wordpress

Jacob Dubail (jacobdubail on github) has made a plugin to make installing AnythingSlider easy in WordPress!
Intallation:
- You can install AnythingSlider for WordPress directly from the WordPress admin panel.
  - Visit the Plugins/Add New page and search for 'AnythingSlider for WordPress'.
  - Click to automatically install.
  - Once installed and activated visit the AnythingSlider admin page (Settings/AnythingSlider) to customize the global AnythingSlider settings.
- If you're old school, you can download the plugin, upload the files into the wp-content/plugins directory of your server via FTP, and then visit the Plugins page of the admin panel to activate it.

##Using jQuery 1.3.2

AnythingSlider version 1.7.5 no longer supports jQuery 1.3.2. So if your site uses 1.3.2, you'll have to download an older version. The current minimum jQuery version is 1.4.2, but please use the newest version as there are still some known problems with versions 1.5 and older.
By default, AnythingSlider was written to work with jQuery version 1.4+. But if you must use jQuery 1.3.2, then open the "jquery.anythingslider.js" file in an editor and uncomment out the last section.

/* AnythingSlider works with works with jQuery 1.4+, but you can add the code below to AnythingSlider
   versions older than 1.7.2 to make the code work with jQuery 1.3.2. You'll have to manually add the
   code below to the minified copy if needed */
 // Copied from jQuery 1.4.4 to make AnythingSlider backwards compatible to jQuery 1.3.2
 if (typeof jQuery.fn.delay === 'undefined') {
  jQuery.fn.extend({
   delay: function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[time] || time : time; type = type || "fx";
    return this.queue( type, function() { var elem = this; setTimeout(function() { jQuery.dequeue( elem, type ); }, time ); });
   }
  });
 }

Also note that jQuery versions older than 1.5 have an issue with sliders wider than 10,000 pixels (see the FAQ for more details).

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

Home
FAQ
Setup
Usage
- Appearance
- Navigation
- Slideshow
- Callbacks
- Video
- Audio
- FX
- Interactivity
Themes
Change
Credits

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Setup

Add the following inside the `<head></head>` of your page. Note: AnythingSlider requires jQuery 1.4+ to work properly.

Example HTML

Clone this wiki locally

Setup

Add the following inside the <head></head> of your page. Note: AnythingSlider requires jQuery 1.4+ to work properly.

Example HTML

Clone this wiki locally

Add the following inside the `<head></head>` of your page. Note: AnythingSlider requires jQuery 1.4+ to work properly.