It's recommended to get started with the slider by checking the included examples. You can learn a lot by looking at how they were set up and you can even use them as a starting point for your own implementation.
If you want to start implementing a new slider from scratch, you will find all the scripts in the 'source files' folder. There are a few mandatory files, while the rest are optional and need to be included in your page only if you use certain features. You are provided with both minified and developer files, the latter of which contain the uncompressed and commented source code. In the _dev folder you can also find the PSD files for the skins.
1. Copy required files
Next, I will copy the files that I need from the 'source files' folder into these 2 directories. For now, I'm only going to use the mandatory files, so from 'source files/js' I will copy the Advanced Slider script (jquery.advancedSlider.min.js) and the Excanvas script (excanvas.compiled.js), which is mandatory for older versions of IE (IE8 and lower). You will also need to download the jQuery script from the jQuery official website, or you can copy the file from one of the examples.
From 'source files/css/base' I will copy 'advanced-slider-base.css', which is the skeleton for the skin CSS files, and the 'images' folder, which contains some common image assets. I also need to copy one of the skin folders, which can be found in 'source files/css/slider-skins'. I will copy the 'pixel' folder.
2. Include files in the page
After copying all the necessary files, I need to include them in the header of the HTML page.
3. Create HTML markup
Although you can use XML instead of HTML markup to specify the content, in this introductory example I will use some basic HTML. Later, I will show you how to use XML as well.
The HTML markup needs to be specified inside the <body> tag.
In this code example I only added slide images and thumbnails, but it's possible to add other elements as well, like animated layers. Also, please note that thumbnails can be simple images or they can contain HTML content.
<body> <div class="advanced-slider" id="my-slider"> <div class="slides"> <div class="slide"> <img class="image" src="../images/slides/image1.jpg" alt=""/> <img class="thumbnail" src="../images/thumbnails/image1.jpg" alt=""/> </div> <div class="slide"> <img class="image" src="../images/slides/image2.jpg" alt=""/> <div class="thumbnail"> <p>Slide title</p> <img src="../images/thumbnails/image2.jpg" alt=""/> </div> </div> <div class="slide"> <img class="image" src="../images/slides/image3.jpg" alt=""/> <img class="thumbnail" src="../images/thumbnails/image3.jpg" alt=""/> </div> <div class="slide"> <img class="image" src="../images/slides/image4.jpg" alt=""/> <div class="thumbnail"> <p>HTML content for the thumbnail</p> </div> </div> <div class="slide"> <img class="image" src="../images/slides/image5.jpg" alt=""/> <img class="thumbnail" src="../images/thumbnails/image5.jpg" alt=""/> </div> </div> </div> </body>
4. Instantiate the slider
The last step is to instantiate the slider. In this example I won't pass any property to the slider, which means that the default values will be used. This code needs to be added after including the necessary files for the slider.
These are all the steps required for creating a basic slider.