find-templates

contentslider

zurück zur Übersicht

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;" />

Heute: 1 Besucher