README
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