Setting up the slider

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.

Let's try to create a new slider. As it is a good practice to keep your files organized, I'm going to create separate directories for the JavaScript and CSS files: 'js' and 'css'.

1. Copy required files

JavaScript 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.

CSS files

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.

<!DOCTYPE html>
     
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Page Title</title>
     
        <link rel="stylesheet" type="text/css" href="css/advanced-slider-base.css" />
        <link rel="stylesheet" type="text/css" href="css/pixel/pixel.css" />
    
	<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.min.js"></script>
        <!--[if IE]><script type="text/javascript" src="js/excanvas.compiled.js"></script><![endif]-->
        <script type="text/javascript" src="js/jquery.advancedSlider.min.js"></script>
    </head>
	
    <body>
     
    </body>
</html>

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.

As you can see in the code below, you need to create a main DIV container to which you assign the "advanced-slider" class. It's also recommended to assign a unique ID, which you can use to reference the slider in the CSS or JavaScript code. Inside the main container, you need to create a "div" element and assign it the "slides" class. Then, for each slide, create a new "div" element and assign it the "slide" class. Inside the slide element you can add elements for the slide.

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.

<script type="text/javascript">
    jQuery(document).ready(function($){
        $('#my-slider').advancedSlider();
    });
</script>

These are all the steps required for creating a basic slider.

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk