You may want to export your slider as HTML, should you need to include it in a HTML-based website, or in a CMS other than Wordpress. The HTML created by cssSlider can be used in any CMS that allows you to use and edit HTML directly.
When you have completed your slider by adding all the images you want to use, changing the skin and transition effect, and adding titles and captions, you can export the HTML in the following way:
Click on the ‘Save HTML’ button in the top navigation bar.
Pick a folder where your HTML will be saved and then click ‘save’.
Using the HTML
The main HTML will be in a file called ‘cssslider.html’. This contains a complete page of HTML, ready to be displayed in a browser without any modification or editing.
You can use this page as the basis of a simple, single page website, by adding additional content such as a headline, copy and links.
However, the more likely scenario is that you will want to copy the cssSlider into a webpage you already have.
If you want to copy the slider into an existing HTML page, you will need to ensure you copy everything between:
<!-- Start cssSlider.com -->
And:
<!-- End cssSlider.com -->
You should paste that code into the correct location for the slider in your HTML code, for example into a header div. Remember that the slider is completely responsive, so will re-shape itself to fit the available screen space.
Troubleshooting the HTML
If, after copying the HTML you experience problems please check the following sections:
<link rel="stylesheet" href="engine1/style.css">
<!--[if IE]><link rel="stylesheet" href="engine1/ie.css"><![endif]-->
<!--[if lte IE 9]><script type="text/javascript" src="engine1/ie.js"></script><![endif]-->
The urls link to stylesheets contained within a separate folder called engine(ID of your slider). If you change the name of the folder or move the folder to a different location within the file system, you will need to update the links appropriately.
<div class="img"><img src="data1/images/istock_000000654343xsmall.jpg" style="width: 100%;"></div>
These are links to the slideshow images, and again these images are contained with a separate folder called data(ID of your slider). Again, if you rename the folder or change the location you should update these links. We recommend keeping all your slideshow images in a separate folder to make them easier to find/use.
<div class="img"><img src='data1/tooltips/istock_000000654343xsmall.jpg' alt='iStock_000000654343XSmall' title='iStock_000000654343XSmall' /></div>
In the same ‘data(ID of your slider) folder is a second subfolder for thumbnail images. If you have included bullet navigation with thumbnail previews, this is the place where those thumbnails are stored. Again, should you move or change the name of the folder, you should change the links.
