Du kanske vill exportera din slider som HTML, om du behöver inkludera den på en HTML-baserad sida eller i en annan CMS än Wordpress. HTMLen som skapades av cssSlider kan användas i alla CMS som låter dig använda och redigera HTML direkt.
När du gjort klart slidern genom att lägga in alla bilder du behöver kan du ändra skinn- och transitionseffekten, och lägga till titlar och undertexten, varefter du kan exportera HTMLen på följande sätt:
Klicka på knappen 'Spara HTML' i toppen.
Välj mappen där du vill spara din HTML och klicka 'spara'.
Använda HTML
Huvud-HTMLen sparas i en fil med namnet ‘cssslider.html’. Den innehåller en hel sida HTML, redo att visas i en webbläsare utan att modifieras eller redigeras.
Du kan använda sidan som bas för en enkel webbsida genom att lägga till ytterligare material som rubriker, text och länkar.
Det mer sannolika scenariot är däremot att du vill kopiera in cssSlider i en webbsida du redan har.
Om du vill kopiera slidern till en existerande HTML-sida behöver du se till att du kopierar allt mellan:
<!-- Start cssSlider.com -->
Och:
<!-- End cssSlider.com -->
Du borde klistra in koden på rätt ställe i din HTML-kod, till exempel i en header-div. Kom ihåg att slider är helt responsiv, så den formar sig själv efter det tillgängliga utrymmet.
Troubleshooting i din HTML
Om du upplever problem efter att du kopierat din HTML kan du kolla in de följande delarna:
<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]-->
URLerna länkar till stylesheets i en separat mapp som heter engine(din sliders ID). Om du ändrar namnet på mappen eller flyttar det till en annan plats i filsystemet så behöver du uppdatera länkarna därefter.
<div class="img"><img src="data1/images/istock_000000654343xsmall.jpg" style="width: 100%;"></div>
Det finns blänkar till slideshowbilderna, och återigen, dessa bilder ligger i en separat mapp som heter data(ID of your slider). Återigen, om du flyttar dem eller byter namn på mappen måste du ändra länkarna. Vi rekommenderar att du behåller slideshowbilderna i en separat mapp för att de ska vara lättare att hitta/använda.
<div class="img"><img src='data1/tooltips/istock_000000654343xsmall.jpg' alt='iStock_000000654343XSmall' title='iStock_000000654343XSmall' /></div>
I samma mapp, ‘data(ID of your slider), finns det en andra mapp med mindre bilder. Om du har med knappnavigering med bildförhandsvisning är det här de mindre bilderna lagras. Återigen, om du flyttar dem eller byter namn på mappen måste du ändra länkarna.
