Features

Quick and easy install

You don't want to waste your time trying to get that stupid slider working. And you don't want to have to hassle with it once it's up. You want something that works with your styles and code the way YOU want to write it! That's why there's AnythingSlider! It slides whatever you want whenever you want. Just include the appropriate files in your HTML header and call a script on the wrapper div around the elements you want to slide and away you go!

Responsive Design

I know, I know. I'm a disigner like you. Everything needs to be responsive these days. It's not cool if it's not right? So... This site will make sure that the elements that you hand it won't exceed 100%. The rest is up to you. You have so much control over the settings of this plugin. Use all your own styles and it will work with what you give it!

Simple Customizing

This plugin has a lot of options. And I'm not going to make you dig into a separate file to do any customization. You just copy and paste the script code chunk and edit the options based on what's available to you. You edit the settings of the plugin right in your html. Why make it more complicated than that? We've gotta go home sometime, right? So look over there to see what options you do have. →

Settings

Transition Style

style:
  'slide-left'
  'scale-down'
  'shuffle'
  'slide-diagonal'
  'slide-up'
  'block'
  'slide-left'
  'fade'

The Style setting allows you to change which kind of transition is used for that specific carousel.

Transition Speed

transitionSpeed:
  'fast'
  'normal'
  'slow'
  1000 (will equate to 1 second)

The transition speed can be set to three defaults or specified by a number of milliseconds. 1000 milliseconds represents a second. 60000 milliseconds represents a minute and so on.

Carousel Speed

transitionSpeed:
  'fast'
  'normal'
  'slow'
  1000 (will equate to 1 second)

Carousel Speed determines time between transition. Set your carousel speed to 600000000 to keep your slider from automatically changing.

Arrows

arrows:
  true
  false

Give your carousel arrows to progress forward or backward. You can change the image simply by adding an image to the images folder of the plugin and edit the carousel.css file to reflect your new images. The default images have a white and black version that can be changed in the carousel.css file.

Buttons

buttons:
  true
  false
buttonsTheme:
  'dots'
  'lines'
  'numbers'

Feel free to adjust the style of these button options. They are available in the carousel.css file. To put the buttons on the top instead of the bottom change: bottom: 0; to top: 0;

Stop On Hover

stopOnHover:
  true
  false

Some prefer their carousel to stop when you mouse over it. Other prefer that it keep going! The slider will stop when you hover over a button or arrow, but this is the setting to stop when hovering over the entire object.

Carousel Height & Width

carouselHeight:
  'crop'
  'dynamic'
  'max'
carouselWidth:
  'crop'
  'dynamic'
  'max'

The width and height of the carousel can be set to either resize to the smallest image ('crop'), resize to the largest element ('max'), or resize each time the image changes to the size of the image.

Easy Hyperlink

data-link="http://example.com"

No matter what your element is you can make it a link by adding the data-link attribute to it. The plugin will do the rest.

Testimonials

Your only limitation is ...

YOUR IMAGINATION!!!

Slide anything:

DIVs

Videos

Unordered Lists

Headers

Full Width Images

Paragraphs

. . .

Dynamically Show Multiple Sizes

public domain image public domain image public domain image