Wie Sie Ihr Slider HTML exportieren und verwenden

Wenn Sie Ihren Slider auf eine HTML basierend Website, oder einem CMS der nicht Wordpress ist, einbauen wollen, dann sollten Sie den Slider nach HTML exportieren. HTML erstellt mit cssSlider kann in jedem CMS, welches das Verwenden und Bearbeiten von HTML erlaubt, verwendet werden.

Wenn Sie Ihre Präsentation mit allen Bildern fertig gestellt haben, Skin und Übergangseffekte angepasst haben, sowie Überschrift und Beschriftung eingebracht haben, können Sie sie so nach HTML exportieren:

Klicken Sie den „HTML speichern“ Button in der oberen Navigationsleiste.

Wählen Sie den Ordner, in dem Sie das HTML speichern wollen und klicken Sie „speichern“.

Das HTML verwenden

Der Hauptteil des HTMLs befindet sich in einer Datei namens „cssslider.html“. Diese beinhalten eine ganze Seite HTML, die bereit ist, in jedem Browser ohne Modifikationen oder Bearbeitungen angezeigt zu werden.

Sie können diese Seite als Basis einer simplen Website verwenden, indem Sie weiteren Inhalt wie etwa Überschrift oder Links hinzufügen.

Allerdings ist es wahrscheinlicher, dass Sie den cssSlider zu einer bereits existierenden Website hinzufügen wollen.

Wenn Sie den Slider zu einer bereits existierenden HTML Website hinzufügen wollen, sollten Sie sicher stellen, dass Sie alles zwischen:

<!-- Start cssSlider.com -->

Und

<!-- End cssSlider.com -->

Kopieren.

Sie sollten den Code am richtigen Ort für den Slider im HTML Code einfügen, zum Beispiel im header div. Vergessen Sie nicht, dass der Slide komplett reaktiv ist, er passt sich also automatisch jedem Bildschirm an.

Fehlersuche im HTML

Sollten Sie nach Kopieren des HTMLS Probleme feststellen, kontrollieren Sie bitte folgende Sektionen:

<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]-->

Die URLs linken zu Stylesheets, die sich in einem extra Ordner namens engine(ID Ihres Sliders) befinden. Wenn Sie den Namen des Ordners ändern, oder ihn im Dateisystem verschieben, müssen Sie die Links entsprechend updaten.

<div class="img"><img src="data1/images/istock_000000654343xsmall.jpg" style="width: 100%;"></div>

Das sind Links zu den Präsentationsbildern, auch diese befinden sich in einem separaten Ordner namens data(ID Ihres Sliders). Auch hier gilt, wenn Sie den Namen des Ordners ändern, oder Ihn verschieben, so müssen Sie die entsprechenden Links updaten. Wir empfehlen, alle Bilder in einem separaten Ordern zu verstauen, um sie leichter finden/verwenden zu können.

<div class="img"><img src='data1/tooltips/istock_000000654343xsmall.jpg' alt='iStock_000000654343XSmall' title='iStock_000000654343XSmall' /></div>

Im selben data(ID Ihres Sliders) Ordner befindet sich ein Unterordner mit Vorschaubildern. Wenn Sie Navigationspunkten mit Vorschaufenstern eingebaut haben, ist dies der Ort, wo sich diese Bildchen befinden. Auch hier gilt, wenn Sie den Namen des Ordners ändern, oder Ihn verschieben, so müssen Sie die entsprechenden Links updaten.