Loading, please wait...

ARTDESIGN SLIDER

Description

ArtDesign Slider is a JavaScript PlugIn, which presents images with various transition effects.
12 transition effects
Support images with different resolution
Automatic resize of the images
Full support of all advanced Web browsers
Full style control only with JavaScript, without using CSS
Full style control - Size (width, height), Margin and Padding, Background (background color, gradient), Shadow (outer, inner), Border (width, color, radius), Icon (font, size, color)
Set the style with attributes
Set multiple styles, and each of them overwrites the previous
Opportunity to define an unlimited number of own styles
Integration with ArtDesign Icons
Hover / Click Animations
Listening for click events
Listening for scroll events
Public Methods: Destroy

Demo

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5

HTML

<div class="ArtDesign">
    <div data-plugin-ad-slider="ad-slider">
        <ul>
            <li>
                <img src="Path/To/Images/Slider/1.jpg" alt="Image 1">
            </li>
            <li>
                <img src="Path/To/Images/Slider/2.jpg" alt="Image 2">
            </li>
            <li>
                <img src="Path/To/Images/Slider/3.jpg" alt="Image 3">
            </li>
            <li>
                <img src="Path/To/Images/Slider/4.jpg" alt="Image 4">
            </li>
            <li>
                <img src="Path/To/Images/Slider/5.jpg" alt="Image 5">
            </li>
        </ul>
    </div>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArtDesign").ArtDesignSlider();
    });
</script>