Slider (Javascript) in WP einbauen

Durch ein Slider Script lassen sich wichtige Beiträge sehr elegant präsentieren. Es gibt hier zahlreiche Javascripte.

Am besten gefallen hat mir Easy Slider.
Dort gibt es verschiedene Möglichkeiten dieses jQuery Script zu nutzen. Die schönste Methode: Demo

Anleitung zum Einbau in WordPress:

1. download v1.7 inkl. Javascript, CSS-Dateien u.a.
2. Entpacken und die Dateien von dem js-Ordner in das eigene Theme kopieren (zumeist gibt es dort auch einen Ordner namens js oder javascript)
3. Einbinden der Scripte in header.php

   <!-- jQuery: Slider -->
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/easySlider1.7.js"></script>

   vor dem <?php wp_head(); ?>
</head>
   Anmerkungen hierzu siehe unten

4. Das Script muss noch ergänzt werden um einen Funktionsaufruf. Dazu auf der Seite von Easy Slider die verschiedenen Demos anschauen. Und beim gewünschten den „Usage-Code“ kopieren.
   Beispiel::

   $(document).ready(function(){
$("#slider").easySlider();
});

   Diesen Code einbinden in ein Script-Aufruf:

   <script type="text/javascript">
...Usage Code...
</script>

   und direkt unterhalb der Scripte in header.php einsetzen.

5. Styling Angaben eintragen in der style.css
   oder daür eine eigene css-Datei erstellen um im header.php verknüpfen:

   <link rel="stylesheet" href="...Pfad zur css-Datei..." type="text/css">

   Beispiel Styling findet man bei Easy Slider
   oder hier

   Spoiler

   #slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider, #slider li{
width:500px;
height:200px;
overflow:hidden;
}
span#prevBtn{}
span#nextBtn{}

   [Einklappen]
6. Die Grafiken (rechts und links Button) in den Theme Image Ordner einügen.
7. Beitrag schreiben.
   Die Struktur ist sehr einfach gehalten.

   <div id="slider">
<ul>
<li>1.Bild, Text u.a...</li>
<li>2.Bild, Text u.a...</li>
<li>3.Bild, Text u.a...</li>
</ul>
</div>

Damit das alles schick aussieht sollten die Bilder alle das selbe Format haben. Im Standard wäre das 500×200 px.

zu 3.) Einbinden der Scripte.
WordPress enthält bereits das jquery-Script. Es ist somit eigentlich nicht notwendig dieses zusätzlich aufzurufen.
Statt

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>

kann das vorhandene aktiviert werden durch:

<?php wp_enqueue_script('jquery'); ?>

[mehr Infos]
Bei mir hat das aber leider noch nie funktioniert.

Alternativ kann man auch ein Tab-Menü verwenden. [Siehe Beitrag]

weitere Slide-Scripte:

• Nivo Slider mit Effekten
• Smooth Gallery siehe Kommentar
• Slide Player für jQuery von Sergej Müller
• Featured Content Slider von IWebIX
• Wow-Slider Extern per Software erstellen und anschliessend in Homepage einbauen.
• Coda Slider Kombination mit einem Tab-Menu – Tutorial (1) (2)
• Tiny Carousel kleine, aber feine Lösung
• jCarousel Lite sehr klein mit 2KB
• Slide-Viewer funktional, mit Tabs
  und Slide-Viewer Pro mit Thumbnails
• Featured Content Gallery stylisch
• Slick Slideshow
• Agile Carousel Demo mit jQuery
• Step Carousel Viewer
• iCarousel horizontal oder vertikal

Eine Übersicht von diversen Slider, Scroll und Accordion Plug-Ins gibt es beim Blogrammierer

Für reine Fotoserien:

• Blogrammierer Die besten Bildgalerie Erweiterungen