find-templates - contentslider

contentslider

Content Slider (jQuery)

Thema 1
Mit Klick auf den Pfeil "fährt" nächster Inhalt hinein.

Thema 2
Wir können hier Texte, Grafiken, oder Tabellen platzieren. Jeder Inhalt ist möglich. Alles was sich via HTML einbinden lässt.

Thema 3
Der Slider lässt sich beliebig erweitern.

Thema 4
Die Inhalte sollten immer die gleiche Höhe einnehmen,
die Pfeile würden sonst dort zu tief sitzen, wo wenig Inhalt vorhanden ist.

Thema 5
Der Rahmen (oben und unten) kann entfernt werden. Das Bild links zeigt übrigens die Sylt-Fähre von Dänemark nach Sylt.

Thema 6
Der Rahmen um die Pfeile (zum Blättern) kann entfernt werden. Ihr könnt auch eigene Pfeile einbinden.

Schritt 1: CSS-Code für das Aussehen

auf "Eigene Seiten editieren"
wähle Seite aus, wo Slider eingefügt werden soll
im Editor (Werkzeugleiste) oben links auf "Quellcode" klicken
nun wird der Seiteninhalt als HTML-Code angezeigt
zu Beginn des Inhalts folgenden CSS-Code einfügen

<style type="text/css">
<!--

/* Aussehen Contenstlider */
#slider1 div {
  border-top: 1px solid #c9c9c9;
  border-bottom: 1px solid #c9c9c9;
  padding: 10px 0px 10px 0px; 
  overflow: hidden; }

/* Pfeil Links und Rechts */
a.bx-prev, a.bx-next {
  display: block;
  margin: 10px 5px 20px 5px;
  width: 41px;
  height: 41px;
  border: 1px solid #c9c9c9;
  border-radius: 5px; }

/* Grafik Pfeil Links */
.bx-prev {
  float: left;
  background-image: url(Grafikadresse);
  text-indent: -100px; }

/* Grafik Pfeil Rechts */
.bx-next {
  float: right;
  background-image: url(Grafikadresse);
  text-indent: 100px; }

.bx-pager-item { display:none; }
-->
</style>

Die Grafikadresse einfügen:

auf "Bilder verwalten"
gewünchte Grafiken (Pfeile) hochladen
nach dem Hochladen Bildernamen anklicken
das Bild wird angezeigt
mit der Maus auf das Bild
mit Rechtsklick die Grafikadresse kopieren
die beginnt mit //img.webme.com/pic/./......name.jpg
im CSS-Code einfügen, dort wo "Grafikadresse" steht
width und height bekommen die Größe, die der Pfeil hat

Schritt 2: Javascript (Slide-Effekt)

folgenden Code mit im Seiteninhalt einfügen
gleich nach dem CSS-Code :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.7/jquery.bxslider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>

Schritt 3: HTML-Code mit Inhalt

<div id="slider1">
   <div> Überschrift 1 <br /> hier der Inhalt Feld 1 </div>
   <div> Überschrift 2 <br /> hier der Inhalt Feld 2 </div>
   <div> Überschrift 3 <br /> hier der Inhalt Feld 3 </div>
   <div> Überschrift 4 <br /> hier der Inhalt Feld 4 </div>
   <div> Überschrift 5 <br /> hier der Inhalt Feld 5 </div>
</div>
<br style="clear: both;" />

Ihr könnt es auch für Bilder verwenden.

Beachtet bitte : Die DIV-Felder liegen alle nebeneinander. Beim Besuch der Seite werden alle Inhalte geladen. Darum unbedingt die Bilder VOR dem Hochladen verkleinern ! Auf ca. 450 Pixel breite.

Für die Nutzung mit Bildern:

<div id="slider1">
   <div> <img src="Grafikadresse 1" alt="Infotext" /> </div>
   <div> <img src="Grafikadresse 2" alt="Infotext" /> </div>
   <div> <img src="Grafikadresse 3" alt="Infotext" /> </div>
   <div> <img src="Grafikadresse 4" alt="Infotext" /> </div>
   <div> <img src="Grafikadresse 5" alt="Infotext" /> </div>
</div>
<br style="clear: both;" />