ClassySlider
Sliding images, the fancy way!

ClassySlider is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to embed beautiful slideshows into your webpages.

Download it

• 
  the Dalaran Arena
• 
• 
• 
  the Trial of Champion
• 

First you need to include the jQuery library, since ClassySlider is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Secondly, you need to include the jQuery ClassySlider javascript and the css file into your page. You can do it by adding the code below to your page.

<script src="js/jquery.classyslider.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classyslider.min.css" />

Next, you implement the structure for the slider. This is done using lists and images.

<ul class="slider">
    <li><img src="images/demo/sample1.jpg" /></li>
    <li><img src="images/demo/sample2.jpg" /></li>
    <li><img src="images/demo/sample3.jpg" /></li>
</ul>

As the last step, you trigger the ClassySlider() function on the element you just created. In this case, we trigger the function on the ul with the class slider.

$('.slider').ClassySlider();

• Parameters

  ---

• autoplay - if the slider will autoplay, can be true or false, default is true
• pause - pause autoplay if the mouse hovers on a slide, can be true or false, default is true
• distance - width of the slide to show when it's not visible, default is 40
• duration - duration of slide animation, default is 3000 which means 3 seconds