Quick start

Quick start

The Evo Slider plugin is extremely simple to use, however if you are new to jQuery or working in a browser, we recommend that you read the 'Beginners Guide' section of this userguide in place of this quick start guide.

Follow this quick step to start using Evo Slider plugin:

  1. Create a new HTML file.
  2. Copy the Evo Slider folder into the same directory where your HTML file is.
  3. Imports the Evo Slider stylesheet and the default skin into your HTML file, like so: 

    <!doctype html>
<html>
<head>

    <title>My First Evo Slider</title>
    
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" />
       
</head>
<body>
</body>
</html>
  4. Import the latest version of jQuery and the Evo Slider file: 

    <!doctype html>
<html>
<head>
    <title>My First Evo Slider</title>
    
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" />
    
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.evoslider.js"></script>   
</head>
<body>
</body>
</html>
  5. Add the following markup to the body of the HTML file, in order to build a slider containing three slides: 

    <!doctype html>
<html>
<head>
    <title>My First Evo Slider</title>
    
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" />
    
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.evoslider.js"></script>   
</head>
<body>

<div id="mySlider" class="evoslider default">    
    <dl>
    
	    <dt>slide one title</dt>
	    <dd>
	        slide one content
	    </dd>
	
	    <dt>slide two title</dt>
	    <dd>
	        slide two content
	    </dd>
	
	    <dt>slide three title</dt>
	    <dd>
	        slide three content
	    </dd>
    
    </dl>
</div>

</body>
</html>
  6. Add the following code just before the closing <body> tag to initialize the Evo Slider plugin: 

    <!doctype html>
<html>
<head>
    <title>My First Evo Slider</title>
    
    <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
    <link rel="Stylesheet" type="text/css" href="css/default/default.css" />
    
    <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.evoslider.js"></script>   
</head>
<body>

<div id="mySlider" class="evoslider default">    
    <dl>
    
	    <dt>slide one title</dt>
	    <dd>
	        slide one content
	    </dd>
	
	    <dt>slide two title</dt>
	    <dd>
	        slide two content
	    </dd>
	
	    <dt>slide three title</dt>
	    <dd>
	        slide three content
	    </dd>
    
    </dl>
</div>

<script type="text/javascript">
    $("#mySlider").evoSlider();
</script>

</body>
</html>
    You can now test the HTML file in a browser to see your Evo Slider.