2.1.0 • Published 9 years ago
artdesign-slider v2.1.0
#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
scriptwindow.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()
fromArtDesignFilesLoader
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