Beginners Guide
This tutorial takes you through the very basics of setting up Evo Slider. If you're an experienced developer check out the quick start tutorial instead.
1. Create your HTML file
Open the application you prefer to code markup in. This could be a WYSIWYG editor such as Adobe Dreamweaver or a plain text editor such as Notepad on Windows or TextEdit on Mac.
If you're using a WYSIWYG editor such as Dreamweaver start a new HTML file then select the 'Code' view.
If you're not using a WYSIWYG editor, start a new file and type (or copy and paste) the following markup:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
</body>
</html>
Save the file as 'index.html'.
2. Create Evo Slider Markup
To create a slider in the Evo Slider markup you add a <div> element with the class 'evoslider' inside the <body> element of your file. Give an 'id' to the div element and don't forget to add skin name in the class attribute.
Your file should now look like this:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
</div>
</body>
</html>
Every time you create Evo Slider you have to add 'evoslider class into the <div> element. The 'default' class is the name of CSS skin.
3. Adding Slides
We use a definition list (<dl>) element to create the structure of the slides. Add the following code to create four slides:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
</body>
</html>
The <dt> element will work as the title bar navigation in accordion mode. The <dd> element will work as the slide content area.
4. Adding Titles
Add the title of the slides inside the <dt> element. The text inside the <dt> element will display in the title bar navigation (accordion) and rotator list navigation.
Your file should now look like this:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd></dd>
<dt>slide two</dt>
<dd></dd>
<dt>slide three</dt>
<dd></dd>
<dt>slide four</dt>
<dd></dd>
</dl>
</div>
</body>
</html>
5. Adding HTML Contents
You can add HTML contents inside the <dd> element.
Your file should now look like this after you add simple text into the slide content area:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd>slide one content</dd>
<dt>slide two</dt>
<dd>slide two content</dd>
<dt>slide three</dt>
<dd>slide three content</dd>
<dt>slide four</dt>
<dd>slide four content</dd>
</dl>
</div>
</body>
</html>
You can place any HTML tags inside the <dd> element.
6. Adding Images (Pro)
You have two ways to include image on your slide. First, by using the 'data-src' attribute. And the second is by adding directly inside the <dd> element using the <img> tag.
If you want to load the image in sequential or lazy load mode, you have to use the 'data-src' attribute. Here's how to include images using the 'data-src' attribute:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg">
</dd>
<dt>slide two</dt>
<dd data-src="image2.jpg">
</dd>
<dt>slide three</dt>
<dd data-src="image3.jpg">
</dd>
<dt>slide four</dt>
<dd data-src="image4.jpg">
</dd>
</dl>
</div>
</body>
</html>
7. Adding a URL to images
To add a URL to images simply enter the URL address into the custom 'data-url' attribute, like so:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg" data-url="http://your-domain.com">
</dd>
<dt>slide two</dt>
<dd data-src="image2.jpg" data-url="http://your-domain.com">
</dd>
<dt>slide three</dt>
<dd data-src="image3.jpg" data-url="http://your-domain.com">
</dd>
<dt>slide four</dt>
<dd data-src="image4.jpg" data-url="http://your-domain.com">
</dd>
</dl>
</div>
</body>
</html>
8. Adding Videos (Pro)
You can also add videos into your slides. You can use the 'data-src' attribute to enter the address of the video. Currently, the 'data-src' attribute only support video from YouTube or Vimeo website. To enter video from other website, you can use the embed method below.
Here's an example how to add videos using the 'data-src' attribute:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="http://vimeo.com/34381687">
</dd>
<dt>slide two</dt>
<dd data-src="http://www.youtube.com/watch?v=WQro3kvKCtk">
</dd>
<dt>slide three</dt>
<dd data-src="http://vimeo.com/34381687">
</dd>
<dt>slide four</dt>
<dd data-src="http://www.youtube.com/watch?v=WQro3kvKCtk">
</dd>
</dl>
</div>
</body>
</html>
9. Adding Embed Object (Pro)
For the video or flash object that do not support by the 'data-src' attribute, you can add the embed object inside the 'evoEmbed' class element. Here's how to do that:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd>
<div class="evoEmbed">
<iframe src="http://player.vimeo.com/video/35965795?title=0&byline=0&portrait=0&color=ffffff"
width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
</dd>
</dl>
</div>
</body>
</html>
10. Adding Text Description (Pro)
You can add text description for the media content (images, videos, and embed object) in three layout mode: overlay, partial left, and partial right.
You can setting up the text mode via the custom 'data-text' attribute by entering one of the following values: 'overlay', 'partialleft', or 'partialright'.
You can enter the text description in the 'evoText' class element and placing any HTML tags inside it.
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg" data-text="overlay">
<div class="evoText">
text description
</div>
</dd>
<dt>slide two</dt>
<dd data-src="http://www.youtube.com/watch?v=WQro3kvKCtk" data-text="partialleft">
<div class="evoText">
text description
</div>
</dd>
<dt>slide three</dt>
<dd data-src="http://vimeo.com/34381687" data-text="partialright">
<div class="evoText">
text description
</div>
</dd>
<dt>slide four</dt>
<dd data-src="image2.jpg" data-text="overlay">
<div class="evoText">
text description
</div>
</dd>
</dl>
</div>
</body>
</html>
11. Adding Thumbnail Images (Pro)
Thumbnail images use in the thumbnail carousel and rotator list navigation. To include thumbnail images, just enter the image address in the custom 'data-thumb' attribute, like so:
<!doctype html>
<html>
<head>
<title>My First Evo Slider</title>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg" data-thumb="image1-thumb.jpg">
</dd>
<dt>slide two</dt>
<dd data-src="image2.jpg" data-thumb="image2-thumb.jpg">
</dd>
<dt>slide three</dt>
<dd data-src="image3.jpg" data-thumb="image3-thumb.jpg">
</dd>
<dt>slide four</dt>
<dd data-src="image4.jpg" data-thumb="image4-thumb.jpg">
</dd>
</dl>
</div>
</body>
</html>
12. Importing Styles
To make Evo Slider work well, you need to include two styles into your page. First, the 'evoslider.css' and second is your skin stylesheet (i.e. default.css).
Add the following link element to the head of your HTML document to import the styles for the Evo Slider:
<!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>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg">
</dd>
<dt>slide two</dt>
<dd data-src="image2.jpg">
</dd>
<dt>slide three</dt>
<dd data-src="image3.jpg">
</dd>
<dt>slide four</dt>
<dd data-src="image4.jpg">
</dd>
</dl>
</div>
</body>
</html>
The 'evoslider.css' file is mandatory, that's mean you have to include it every time you create an Evo Slider.
13. Importing Scripts
The next stage is importing the required javascript into the file to power the Evo Slider.
Modify the head section to import the necessary JavaScript 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" />
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.evoslider.js"></script>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg" data-thumb="image1-thumb.jpg">
</dd>
<dt>slide two</dt>
<dd data-src="image2.jpg" data-thumb="image2-thumb.jpg">
</dd>
<dt>slide three</dt>
<dd data-src="image3.jpg" data-thumb="image3-thumb.jpg">
</dd>
<dt>slide four</dt>
<dd data-src="image4.jpg" data-thumb="image4-thumb.jpg">
</dd>
</dl>
</div>
</body>
</html>
The jQuery Easing plugin is optional. You only need this file if you want to use more easing functions instead of the default: 'swing' and 'linear'.
14. Initializing Evo Slider Plugin
It's time to activate the Evo Slider by initializing it. Add the following code just before the closing body tag:
<!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.easing.1.3.js"></script>
<script type="text/javascript" src="scripts/jquery.evoslider.js"></script>
</head>
<body>
<div id="mySlider" class="evoslider default">
<dl>
<dt>slide one</dt>
<dd data-src="image1.jpg" data-thumb="image1-thumb.jpg">
</dd>
<dt>slide two</dt>
<dd data-src="image2.jpg" data-thumb="image2-thumb.jpg">
</dd>
<dt>slide three</dt>
<dd data-src="image3.jpg" data-thumb="image3-thumb.jpg">
</dd>
<dt>slide four</dt>
<dd data-src="image4.jpg" data-thumb="image4-thumb.jpg">
</dd>
</dl>
</div>
<script type="text/javascript">
var myEvoSlider = $("#mySlider").evoSlider();
</script>
</body>
</html>
Finally, save the file and open it in a browser to see the slider working.