artdesign-slider

ArtDesignSlider (v2.1.0)

jQuery responsive image slider with support auto resize images with different dimension and Captions animation

• ArtDesignSlider is a jQuery images slider PlugIn
• Responsive
• Support pixels (px) and percents (%) for width and height
• Support full width and full height - 100%
• Class prefix to prevent conflict with classes from other CSS files
• Full style control with JS - no need CSS: width, height, border, icons, colors etc
• Full navigation control
• Full control of the position of all elements
• Support images with different dimensions
• Automatic resizing and centering of images
• Keys press listening
• Mouse wheel listening
• External functions (Go To Previous, Go To Next, Go To)
• 24 transition effects
• Captions with 9 transition effects
• Multiple instances

Full instructions, Examples and Download - www.artdesign-jquery.com/ArtDesignSlider

Instruction

Load files

First method

Load ArtDesignFilesLoader.js.

<script type="text/javascript" src="../Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js"></script>

Load all the necessary files to run a PlugIn with ArtDesignFilesLoader script

window.Files = new ArtDesignFilesLoader(
    [
        /*CSS*/
        "../Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.min.css",
        /*CSS*/
        /*jQuery*/
        "../Resources/JavaScript/jQuery/jQuery.min.js",
        /*jQuery*/
        /*External Plugins*/
        "../Resources/JavaScript/Browser/Browser.min.js",
        "../Resources/JavaScript/ColorAnimation/ColorAnimation.min.js",
        "../Resources/JavaScript/Easing/Easing.min.js",
        "../Resources/JavaScript/MouseWheel/MouseWheel.min.js",
        /*External Plugins*/
        /*ArtDesignPlugIns*/
        "../Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.min.js",
        "../Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.min.js",
        "../Resources/JavaScript/ArtDesign/ArtDesignSlider/ArtDesignSlider.min.js"
        /*ArtDesignPlugIns*/
    ]
);

Then initialize a PlugIn with function Ready() from ArtDesignFilesLoader script.

window.Files.Ready(function() {
    $("#ArtDesignSlider").ArtDesignSlider();
});

Second method

Load all the necessary files to run a PlugIn.

<!-- CSS -->
<link rel="stylesheet" href="../Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.min.css" type="text/css"> 
<!-- CSS -->
<!-- jQuery -->
<script type="text/javascript" src="../Resources/JavaScript/jQuery/jQuery.min.js"></script>
<!-- jQuery -->
<!-- External Plugins -->
<script type="text/javascript" src="../Resources/JavaScript/Browser/Browser.min.js"></script>
<script type="text/javascript" src="../Resources/JavaScript/ColorAnimation/ColorAnimation.min.js"></script>
<script type="text/javascript" src="../Resources/JavaScript/Easing/Easing.min.js"></script>
<script type="text/javascript" src="../Resources/JavaScript/MouseWheel/MouseWheel.min.js"></script>
<!-- External Plugins -->
<!-- ArtDesignPlugIns -->
<script type="text/javascript" src="../Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.min.js"></script>
<script type="text/javascript" src="../Resources/JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.min.js"></script>
<script type="text/javascript" src="../Resources/JavaScript/ArtDesign/ArtDesignSlider/ArtDesignSlider.min.js"></script>
<!-- ArtDesignPlugIns -->

Then initialize a PlugIn.

$(document).ready(function() {
    $("#ArtDesignSlider").ArtDesignSlider();
}

SetUp web elements

ArtDesignSlider

Create <div> > <ul> > <li> > <img>.

<div id="ArtDesignSlider">
    <ul>
        <li>
            <img src="ArtDesignSliderImages/1.jpg" alt="Image 1"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/2.jpg" alt="Image 2"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/3.jpg" alt="Image 3"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/4.jpg" alt="Image 4"/>
        </li>
        <li>
            <img src="ArtDesignSliderImages/5.jpg" alt="Image 5"/>
        </li>
    </ul>
</div>

Development - www.artdesign-bg.com