Appearance Options

Sections: General | Build Components | Appending Components | Toggle Controls | Control Text | Deprecated

General

theme (default)

• Modify this option with the desired theme name. Use one of the included themes or make your own.
• The theme name should not include any spaces and should match the class name used in the theme css file.
• For example, to use the "theme-metallic.css" theme, change this option to "metallic".
• If you examine a theme css file, you will see that every reference to an anythingSlider class includes the theme name (e.g. the "metallic" theme targets the anythingSlider wrapper like this: "div.anythingSlider-metallic"), which is why it is important that the theme name does not include spaces.

mode (horizontal)

• This option has three settings:
  • "horizontal" (or just "h") mode will make the slider behave normally, with a sliding transition moving left and right.
  • "vertical" (or just "v") mode will transition between slide panels vertically. This option replaces the vertical option.
  • "fade" (or just "f") mode will apply a cross-fade transition between the current image and the next.
    • When the slider is in "fade" mode, it will override the infiniteSlides and showMultiple options.
    • As of v1.8.6, fade mode has two behaviors based on the setting of the resumeOnVisible option.
      • With resumeOnVisible set as true (default), the non-current slides will only be hidden by having an opacity of zero. The plugin uses fadeTo internally.
      • if false, non-current slides will also be hidden by display:none. The plugin uses fadeOut internally. What this means is that any video within that hidden panel will become reset when visible again. It's a browser thing, so no way to prevent it.
      • This change was made in hopes of fixing some video issues on iOS devices and other non-desired behaviors like not pausing videos (issue #191 & #333) and starting a video the second time the slide comes into view (issue #263).
  • The Second Demo on the main demo page was updated to use the new cross-fade mode as an example.
  • This option was inspired by Jamy Golden's PlusSlider.

expand (false)

• When false:
  • AnythingSlider dimensions are determined by the css by default.
• When true:
  • AnythingSlider will expand to fit inside of its parent element.
  • This option allows you to apply a percentage width to the parent element for a fluid layout and have the slider resize automatically.
  • One example would be to have a div set to say "100%" browser width. The slider will expand to fit inside this div (width and height).
  • Please do not have the parent element of the slider be the body of the page. It won't break anything, but the height is difficult to determine since the body height measured doesn't include other elements on the page.
  • There is a slight delay while resizing (500 millisecond) as the plugin resizes and repositions the panels. You'll just have to live with it :(
  • There is one bug in Opera where the height isn't set until the parent element is resized... I'll try to find it.

resizeContents (true)

• When set to true:

  • Solitary images and/or objects in the panel will expand to fit the viewport.

  • This option sets the element's width and height to 100% so it will fully fit inside the slider panel.

  • Objects (embedded videos) will also be set to have 100% width and height to fill the slider.

  • Here are some examples of what happens:

    ```html
    <li> <!-- AnythingSlider panel -->
        <img src="myimage.jpg" width="400" height="300">  <!-- immediate & only child of the panel -->
    </li>
    ```
    
    The image in the above example is the immediate and only child of the panel, so when the `resizeContents` option is set to `true`, the image will get a style of 100% width and height applied to it. This will override the width and height attributes of the image and make the image exactly fit inside the panel. 
    
     In this next example we wrap the image with a link:
    
    ```html
    <li> <!-- AnythingSlider panel -->
        <a href="myimage.jpg"> <!-- immediate & only child of the panel -->
            <img src="myimage.jpg" width="400" height="300"> <!-- child of the <a> -->
        </a>
    </li>
    ```
    
    Now the `<a>` is the immediate and only child of the panel and will thus get a style of 100% width and height applied to it. But the `<a>` link isn't a block element, so it really doesn't do anything. Therefore in this case, you will need to include a width and height of the image to match the panel width and height to make it exactly fit inside the panel. **In any case, the image should always get a width and height attribute because the dimensions are needed to calculate the proper slider height**.
    

• When set to false:

  • The AnythingSlider will resize to fit the content. Demo Slider #2 has this set to false, so the slider resizes smoothly to match it's content
  • When setting this value to false, make sure you have the AnythingSlider overall height and width set in the CSS.
  • If you want each panel to vary in size, then you can set these sizes in the CSS. Look in the page.css file under "Set slider2 panel sizes". Also, each panel (li) will have a panel class by default, but to target specific panels, you will need to add these classes manually as it is in the slider#2 demo.
  • Images in the panel will not be resized, so if the panel dimensions do not match the image size, the image will be cropped.

aspectRatio (null)

• Valid values: true, a float e.g. 1.5 (or as 3/2) or a ratio in a string e.g. '3:2'
• If true, the ratio is calculated from the original width/height for slider element, if it is a number and/or ratio, it will use that value.
• When using this option, the aspect ratio (width to height dimensions) will remain constant when the dimensions of the wrapper change.
• This option does work when the showMultiple option is active.
• See the expand demo page to see it working.
• Thanks to npn66nicke for providing the code!

showMultiple (false)

• Set this value to a number greater than one and it will show that many slides at once, set it to false to only show one.
• When set to a number, AnythingSlider will show that number of slides within the view port.
• When showing multiple slides, the width of the slider MUST be included if you have slides of different width - well actually it is the width of one slide, so the plugin can figure out how big to make the view port. If all of your slides are the same width, then the script will divide the slider width by the number of slides to show.
• The maximum number of slides allowed showing is the number of slides.
• If slides have different dimensions and resizeContents is set to false, the slider will resize to the height of the tallest slide.
• Updated the playground with this option. Check it this demo with two slides showing!
• Thanks to caseybecking for the idea. And a ton more thanks to Poebel for sharing the code to do this.

easing ("swing")

• This value determines how the panel is brought into view.
• Any value other than "linear" or "swing" requires the jquery easing plugin to be loaded.

Build Components

buildArrows (true)

• When true, the script will add the forward and backward arrow buttons and functionality.
• The positioning of these arrows is set in the css.

buildNavigation (true)

• When true, the script will build a list of links that control each panel. Clicking on the link will change the slider to the appropriately named panel.
• If false, no links are added.
• While the script builds these navigation links, it checks the navigationFormatter for a function that will name each link. Please see the navigationFormatter section for code examples.

buildStartStop (true)

• New in Version 1.7.
• When true, the script will build the start-stop button used to control the slideshow.
• If false, no start-stop button is created and the slideshow functionality is disabled.
• This was originally combined with the autoPlay option.

Appending Components

appendForwardTo (null)

• New in Version 1.7.
• If the script finds an HTML element in place of null (jQuery Object, selector or HTMLNode), it will attach the forward arrow link to that element.
• HTML element examples: $('#forward') or '#forward'.
• Please note that the default CSS will not apply to this external arrow, so you will have to add CSS as desired to style this panel.
• The toggleArrows will still be applied to this link, so adjust the settings as desired.

appendBackTo (null)

• New in Version 1.7.
• If the script finds an HTML element in place of null (jQuery Object, selector or HTMLNode), it will attach the forward arrow link to that element.
• HTML element examples: $('#back') or '#back'.
• Please note that the default CSS will not apply to this external arrow, so you will have to add CSS as desired to style this panel.
• The toggleArrows will still be applied to this link, so adjust the settings as desired.

appendControlsTo (null)

• If the script finds an HTML element in place of null (jQuery Object, selector or HTMLNode), it will attach the slider controls to that element.
• HTML element examples: $('#controls'), '#controls' or '.sliderControl'.
• The slider control panel includes the navigation links and slideshow play/stop link.
• Please note that the default CSS will not apply to this external control panel, so you will have to add CSS as desired to style this panel.
• The toggleControls will still be applied to this external panel, so adjust the settings as desired.

appendNavigationTo (null)

• New in Version 1.7.
• If the script finds an HTML element in place of null (jQuery Object, selector or HTMLNode), it will attach the navigation links to that element.
• HTML element examples: $('#nav'), '#nav' or '.nav'.
• Please note that the default CSS will not apply to this external control panel, so you will have to add CSS as desired to style this panel.
• The toggleControls will not be applied to these links.

appendStartStopTo (null)

• New in Version 1.7.
• If the script finds an HTML element in place of null (jQuery Object, selector or HTMLNode), it will attach the slideshow start-stop link to that element.
• HTML element examples: $('#play'), '#play' or '.play'.
• Please note that the default CSS will not apply to this external control panel, so you will have to add CSS as desired to style this panel.
• The toggleControls will not be applied to this link.

Toggle Controls

toggleArrows (false)

• When true, the navigation arrows will slide out from the center when hovering the mouse over the slider and hide when not hovering.
• If false, the navigation arrows will not move. It's false by default because the metallic arrow theme looks odd when sliding out as it appears to wrap the slider.

toggleControls (false)

• If false, the control panel (navigation + play/stop button) will remain in place (location set in the CSS).
• If true:
  • The control panel will slide into view when the mouse has hovered over the slider, and hide when not hovered.
  • Also, the control panel will slide into view breifly then back out while the slideshow is playing to show which panel is currently being displayed.
• If "true" (or any string), the navigation controls will not slide into view WHILE a slide show is playing. Only the navigation arrows will toggle (v1.9.3+).

Control Text

startText ("Start")

• This option contains the play/stop link's text while it is stopped.
• This text is only seen in the default theme. In the other available themes, this text is hidden using a negative text-indent.
• The link text is replaced by the value of stopText when the slideshow is active.

stopText ("Stop")

• This option contains the play/stop link's text while it is playing.
• This text is only seen in the default theme. In the other available themes, this text is hidden using a negative text-indent.
• The link text is replaced by the value of startText when the slideshow is stopped.

forwardText ("»")

• Text added to the forward arrow button (»).
• This text is not seen in any of the included themes as the text is shifted out of view using a negaitve text-indent and adding a background image of the arrow.

backText ("«")

• Text added to the back arrow button («).
• This text is not seen in any of the included themes as the text is shifted out of view using a negaitve text-indent and adding a background image of the arrow.

tooltipClass ("tooltip")

• Navigation links in the default theme have text within them. The navigationFormatter can be used to vary this text.
• If you use any of the other available themes, this text becomes hidden using a negative text indent (text-indent: -9999px).
• When the script finds a negative text indent (any number less than one), then the script adds the text to the link's title and adds this CSS class.
• If you have a tooltip plugin that targets this class, a styled tooltip will appear instead of the default browser tooltip.
• This tooltip class will also be applied to the start/stop button.

Deprecated

width (null)

• Removed in Version 1.7 - Width set in the CSS.
• When set to null, AnythingSlider assumes you want to keep the width of the slider as set in the CSS ( e.g. in the anythingslider.css file you will see div.anythingSlider { width: 700px } ).
• If any value is added to this option, it will override the default CSS width.
• When adding a value to this option, use a number 700 or include pixels 700px. The script is not set up to work with percentages.
• Note the width-to-height ratio is kept around 16:9 (wide screen aspect ratio) for the demo's pictures, but you can use any ratio you desire.

height (null)

• Removed in Version 1.7 - Height set in the CSS.
• When set to null, AnythingSlider assumes you want to keep the height of the slider as set in the CSS ( e.g. in the anythingslider.css file you will see div.anythingSlider { height: 390px } ).
• If any value is added to this option, it will override the default CSS height.
• When adding a value to this option, use a number 390 or include pixels 390px. The script is not set up to work with percentages.
• Note the width-to-height ratio is kept around 16:9 (wide screen aspect ratio) for the demo's pictures, but you can use any ratio you desire.

vertical (false)

• Removed in Version 1.8.
• Setting this option to true will switch the slides from their usual horizontal scrolling, to vertical scrolling.
• The up and down keyboard arrows are enabled when this option is true.
• The scrolling is applied to ALL of the slides. I think it would be a mess to mix the scrolling; but if that is what you want then I'd suggest checking out this pure css3 3d slider by Hakim - sadly, it is currently only supported by webkit browsers.
• Another problem is that the showMultiple option doesn't currently work with more than one panel, so this limit is applied.
• Thanks to Caroline-Elisa for suggesting this enhancement.