Using XML

Using XML allows you to define a slider of images or videos outside of your markup for easy updates. To use XML to define the images in your Evo Slider follow these steps:

1. Create a new HTML file.
2. Copy the default skin folder into the same directory.
3. Import Evo Slider stylesheet and the default skin into HTML document:

   <link rel="Stylesheet" type="text/css" href="css/evoslider.css" />
   <link rel="Stylesheet" type="text/css" href="css/default/default.css" />
                   

4. Import the latest version of jQuery and the Evo Slider plugin file:

   <script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
   <script type="text/javascript" src="scripts/jquery.evoslider.js"></script>
                   

5. Add the following script to the head of your document to initialize the Evo Slider with the content of your XML file when the file is ready:

   <script type="text/javascript">
       $(document).ready(function(){
           var myPlugin = $("#mySlider").evoSlider({
               external: {
                   data: "xml",
                   url: "evoslider.xml"
                   }                
               });                
       });    
   </script>
                   

   This code assumes that your XML file, which you'll create shortly will be saved as 'evoslider.xml'.

6. Add the following markup to your html to place the Evo Slider in your document:

   <div id="mySlider" class="evoslider default">
   </div>
                   

7. Create a new XML file.
8. Type or copy and paste the following code into the file:

   <?xml version="1.0" encoding="utf-8" ?>
   
   <evoslider>
     
     <slide>
       <title>Slide title</title>
       <description>Text Description</description>
       <image>images or video url</image>
       <thumb>thumbnail url</thumb>
       <url>http://www.evoslider.com</url>
       <text_mode>overlay</text_mode>
       <image_scale>fullSize</image_scale>
     </slide>
     
   </evoslider>
                   

   The <title> and <description> are self-explanatory, the <image> is the path to main image or video URLs (Dailymotion, Vimeo, or YouTube). The <thumb> is the path to the thumbnail image.

   The <url> is the URL to add to image. The <text_mode> is the text description layout mode ("overlay", "partialleft", or "partialright"). The <image_scale> is the place to define the image scale mode ("fullSize", "fitImage", "fitWidth", "fitHeight", or "none").

9. If you want to add more than one image to your Evo Slider you can do so by repeating the <slide> element.