Themes

Sections: Layout | Classes

• AnythingSlider comes with six included themes, but it should be relatively easy to modify a theme or create your own.
• You can find additional themes here.
• This page will cover the elements and classes that are added to every AnythingSlider

#Layout Starting this with basic markup (note that the UL & LI's can be replaced by any HTML tags, e.g. div, aside, etc.):

<ul id="slider">
  <li>
    <img alt="" src="demos/images/slide-civil-1.jpg">
  </li>
  <li>
    <img alt="" src="demos/images/slide-env-1.jpg">
  </li>
  <li>
    <img alt="" src="demos/images/slide-civil-2.jpg">
  </li>
  <li>
    <img alt="" src="demos/images/slide-env-2.jpg">
  </li>
</ul>

This is the AnythingSlider markup after the plugin has initialized (comments added):

<!--
 "anythingSlider" is the outer wrapper and "anythingSlider-default" is the theme name.
 Replace "default" with the shortened name of the theme (no spaces)
 "activeSlider" is the class used to indicate which slider will change with keyboard navigation
-->
<div class="anythingSlider anythingSlider-default activeSlider anythingSlider-hovered">

  <!-- "anythingWindow" is the viewport from which you see the slider through, it's size will match the panel size -->
  <div class="anythingWindow">

    <!-- "anythingBase" is added to the original element (ul in this case) that the plugin is initialized upon -->
    <ul id="slider" class="anythingBase">
  
      <!--
      "cloned" panels are added when the "infiniteSlides" option is true ;
      there will always be just one cloned panel at the beginning (clone of the last panel)
      -->
      <li class="cloned panel">
        <img alt="" src="demos/images/slide-env-2.jpg">
      </li>
  
      <!-- this is the original first panel and would still be if "infiniteSlides" option is false -->
      <li class="panel activePage">
        <img alt="" src="demos/images/slide-civil-1.jpg">
      </li>
  
      <li class="panel">
        <img alt="" src="demos/images/slide-env-1.jpg">
      </li>
  
      <li class="panel">
        <img alt="" src="demos/images/slide-civil-2.jpg">
      </li>
  
      <li class="panel">
        <img alt="" src="demos/images/slide-env-2.jpg">
      </li>

      <!--
      "cloned" panels are added when the "infiniteSlides" option is true,
      this clone is of the first panel and continued to the next until
      the number of cloned panels equals the number in "showMultiple"
      
      -->
      <li class="cloned panel">
        <img alt="" src="demos/images/slide-civil-1.jpg">
      </li>
  
    </ul> <!-- end anythingBase -->

  </div> <!-- end anythingWindow -->

  <!-- start of navigation controls -->
  <div class="anythingControls">

    <!--
    This UL only exists if the "navigationSize" option is set to a number
    It contains the previous button used to scroll through the navigation tabs
    -->
    <ul>
      <li class="prev">
        <a href="#">
          <!-- span content is obtained from the "backText" option -->
          <span>«</span>
        </a>
      </li>
    </ul>
    <!-- this nav window wrapper is only added if the "navigationSize" option is set -->
    <div class="anythingNavWindow">

      <!-- Thumbnail navigation -->
      <ul class="thumbNav">
  
         <!-- "first" class added to first nav link -->
        <li class="first">
          <!--
          "cur" indicates the currently visible panel/highlighted navigation tab
          each link has a "panel#" class applied, the # indicates the actual panel number (1 based index)
          -->
          <a href="#" class="panel1 cur">
            <!--
            number added by the nagivationFormatter option (panel # by default)
            When hiding the navigation text, target the span with a negative text-indent;
            if the link <a> is targeted with a negative text-indent, older IE will hide the entire link
            -->
            <span>1</span>
          </a>
        </li>
  
        <li>
          <a href="#" class="panel2">
            <span>2</span>
          </a>
        </li>
  
        <li>
          <a href="#" class="panel3">
            <span>3</span>
          </a>
        </li>
  
        <!-- "last" class added to last nav link -->
        <li class="last">
          <a href="#" class="panel4">
            <span>4</span>
          </a>
        </li>
  
      </ul> <!-- end thumbNav -->

    </div> <!-- end anythingNavWindow, which only exists if the "navigationSize" option is set -->

    <!--
    This UL only exists if the "navigationSize" option is set to a number
    It contains the next button used to scroll through the navigation tabs
    -->
    <ul>
      <li class="next">
        <a href="#">
          <!-- span content is obtained from the "forwardText" option -->
          <span>»</span>
        </a>
      </li>
    </ul>

    <!-- start stop button to control the slideshow -->
    <a class="start-stop" href="#">
      <span>Start</span>
    </a>

  </div> <!-- end anythingControls -->

    <!-- back arrow -->
    <span class="arrow back">
      <a href="#">
        <span>«</span> <!-- the text inside the span is added using the "backText" option -->
      </a>
    </span>

    <!-- forward arrow -->
    <span class="arrow forward">
      <a href="#">
        <span>»</span> <!-- the text inside the span is added using the "forwardText" option -->
      </a>
    </span>

</div> <!-- end anythingSlider -->

AnythingSlider classes

as-oldie

• This class is applied using conditional comments to indicate that the browser being used is IE8 or older.
• Using this class in stylesheets has allowed removal of the anythingslider-ie.css file in AnythingSlider version 1.8.

anythingSlider

• Outer wrapper style.
• The dimensions of this element:
  • Will match the content size (resizeable).
  • Include left and right padding to adjust the distance of the navigation from the center. The default theme has a left/right padding of 45px which is the exact width of the navigation arrow.
  • Include padding below to include the navigation tabs, or if the navigation tabs overlap the slider, then the padding bottom would be zero.

anythingSlider-{theme}

• This class is added along with the anythingSlider class and determines which theme is applied to the slider.
• The {theme} part of the class name is customized using the plugin's theme option.
• The themed css definitions start out with "div.anythingSlider-{theme}".
• These theme names can not include spaces!

activeSlider

• This class is added along with the anythingSlider class to indicate that is it the active slider.
• This class is applied when the user interacts with the slider (arrows, navigation or start-stop buttons).
• When a slider has this class, keyboard arrow keys will control it.
• In the included themes, when a slider has this class the color styling is different to indicate which slider is active.

anythingSlider-hovered

• This class is applied to the outer wrapper only while the mouse is hovering over the slider.
• This has no css styling applied to it by default.

rtl

• This class is applied along with the anythingSlider class when the playRtl option is true.
• It indicates the slideshow and navigation arrows will shift the panels from right-to-left.
• This style changes the float and css direction of elements, along with the unicode-bidi.

anythingWindow

• This class is applied to the element immediately inside the outer wrapper and is the viewport from which you see the slider through.
• The size of this element will adjust to match the panel size.
• In the included themes, this element has the top and bottom borders (3px in height) which change color depending on the "activeSlider" class mentioned above.
• Overflow is hidden on this element, unless you want the adjacent slides visible.

anythingBase

• This class is applied to the element that the plugin is called on. In the demos, this element is a UL with an id starting with "slider".

• This element has the slider dimensions applied to it using css.

  #slider { width: 700px; height: 400px; }

• But once the plugin has initialized, the width or height (if the vertical option is true) will be adjusted to include all of the panels.

• For Opera, a max-width of 32766px is applied in the css. If the slider is wider, the slides will wrap to the next line. If you don't care about Opera, then remove this limitation.

• In the fade transition FX demo, this background color is set to black to prevent the flash of white seen while switching slides - setting the anythingWindow background color would work as well.

panel

• This class is applied to all of the immediate children of anythingBase (LI's in the example shown above).
• By default, the panels are made to float left for the horizontal scrolling of the slider.
• Overflow is set to hidden so that if any FX are applied, they don't overlap into the next panel.

vertical

• This class is applied to the original element (#slider) if the vertical option is set to true.
• The float is reset to none so the panels stack vertically.

fade

• This class is applied to the original element (#slider) if the mode option is set to "fade".
• The float is reset to none and all panels are stacked on top of each other.

activePage

• This class is applied to the "panel" that is currently visible.
• If showMultiple is set to show more than one slide, only the left-most panel will have this class applied.
• In the included themes, no styling is applied to this class.

cloned

• This class is applied to the all cloned panels.
• Do not hide these panels as it will break the slider functionality, if you don't want them, set the infiniteSlides option to false.
• In the included themes, no styling is applied to this class.

multiple

• This class is applied to the cloned panels at the end of the slider, but only if there are more than one (as set by the showMultiple option).
• In the included themes, no styling is applied to this class.

anythingControls

• Applied to a div that wraps all of the navigation links and start stop button.
• This wrapper can be moved outside of the slider by using the appendControlsTo option and would therefore need separate styling.
• Change the position of this element inside the slider to absolutely position the navigation controls below or over the slider.

start-stop

• This class is applied to a link that is created inside of the anythingControls wrapper when the buildStartStop option is true.
• This link can also be moved into other elements outside of the slider using the appendStartStopTo option.
• Include a ":hover" state and the ".hover" class when styling.
• When this button has focus the ".hover" class is applied and was included for accessibility because the outline size was set to zero (hides the dotted outline).

playing

• This class is applied to the start-stop link when the slideshow is actively playing.
• Include a ":hover" state and the ".hover" class when styling. See the accessibility note in the "start-stop" description above.

thumbNav

• This class is applied to the UL element that is created when the buildNavigation option is true.
• The navigation can be applied outside of the slider using the appendNavigationTo option and would need separate styling in that case.
• In the included themes, no styling is applied to this class.

first & last

• These classes are applied to the first LI and last LI respectively.
• They were included to allow different styling to either end of the navigation links.
• In the included themes, no styling is applied to this class.

panel#

• Each link inside of the LI of the thumbNav has a panel number class applied.
• The number indicates which panel is visible in the slider (index starting from one).
• In the included themes, these classes are not specifically targeted but the link is by using div.anythingSlider-{theme} .anythingControls ul a. This also allows targeting the links inside the anythingNavWindow to match the styling.

cur

• This class is added to the panel# to indicate the currently visible slide.
• Include a ":hover" state and the ".hover" class when styling.

anythingNavWindow

• This class is applied to an element that wraps the thumbNav when the navigationSize option is set to the number of visible navigation tabs.
• The overflow is hidden and this element is set to float left.

prev & next

• These classes are applied to LI inside of the anythingNavWindow which contains the previous and next arrows to navigate through the navigation tabs.
• The span contains the arrow text as defined in the backText and forwardText options, respectively.

arrow

• This class is applied to span elements added when the buildArrows option is true.
• These arrows can be applied outside of the slider using appendBackTo and appendForwardTo options.
• Vertical centering is accomplished using top: 50% along with a negative top margin set on the link inside, set to half of the arrow image height. But IE doesn't work well with negative margins, so set the margins to zero and adjust the top percentage as needed (see the anythingslider-ie.css source).

back & forward

• Classes applied along with the "arrow" class to indicate if it is the back or forward arrow, respectively.
• Include a ":hover" state and the ".hover" class when styling.
• When this button has focus the ".hover" class is applied and was included for accessibility because the outline size was set to zero (hides the dotted outline).

disabled

• This class is applied along with the arrow class, if the infiniteSlides and stopAtEnd options are both false.
• When on the first slide, the back arrow is set as "disabled". And when on the last slide, the forward arrow is set as "disabled".
• In the supplied themes, the disabled class sets display to none, but you can change this to diminish the opacity if so desired.