Das ist eine horizontale Bildershow, die als Foto-Gallerie oder zur Navigation Anwendung finden kann. Beim Klick auf den Link-Text, Link-Button oder dem Bild öffnet sich eine zuvor eingestellte Seite.  Die Slide-Show stoppt sobald die Maus auf dem Bereich liegt.
Die Größe der Gallerie kann selbst bestimmt und weiter ausgebaut werden. Dazu muss der HTML-Code nur entsprechend ergänzt werden.
In der Zip-Datei befindet sich zwei Unterverzeichnisse für die Sliderbreite 750px und 988px. In den Unterverzeichnissen befinden sich jeweils ein Verzeichnis "jq_slide-show", das so übernommen werden kann und auf den Server kopiert wird. Die Anpassung der Texteinträge erfolgen dann in der aufrufenden Datei, der Style ist in der Datei "slide_style.css" veränderbar. Nur erfahrene Nutzer sollten Änderungen an den CSS-Definitionen vornehmen.
Achtung: Die Ausrichtung der Zelle des Objekts muss auf "Oben" und "Links" eingestellt werden.

Code für den HEAD-Bereich:

<link rel="stylesheet" type="text/css" href="jq_slide-show/slide_style.css" />
<script src="jq_slide-show/jquery.min.js"></script>
<script src="jq_slide-show/slides.min.jquery.js"></script>
<script>
$(function(){
// Set starting slide to 1
 var startSlide = 1;
// Get slide number if it exists
 if (window.location.hash) {
 startSlide = window.location.hash.replace('#','');
 }
// Initialize Slides
 $('#slides').slides({
  preload: true,
  preloadImage: 'jq_slide-show/img/loading.gif',
  generatePagination: true,
  play: 5000,
  pause: 2500,
  hoverPause: true,
  effect: 'fade',
  crossfade: true,
  slideSpeed: 350,
  fadeSpeed: 500,
// Get the starting slide
 start: startSlide,
 animationComplete: function(current){
// Set the slide number as a hash
 window.location.hash = '#' + current;
 }
 });
});
</script>

Code für das HTML-Objekt:

<div id="container">
<div id="example">
<div id="slides">
<div class="slides_container">

<div class="slide">
<h1>Erste Br&uuml;cke</h1>
<p class="slider_content">Das ist Slide 1</p>
<br /><br />
<p><a href="#x" title="">
<img src="jq_slide-show/img/thanks.gif" alt="" title="" /></a></p>
   <div style="position:absolute; left:250px;top:2px;">
   <a class="load_slider_img" href="#x">
<span id="img1">
     <img src="jq_slide-show/img/bruecken_01.jpg" width="450" height="300" />
    </span>
   </a>
 </div>
</div>
  
<div class="slide">
<h1>Zweite Br&uuml;cke</h1>
<p class="slider_content">Das ist Slide 2</p>
<br /><br />
<p><input type=button style=width:161px; value="Weiter lesen &raquo;"
  onClick="window.location='#x'"></p>
   <div style="position:absolute; left:250px;top:2px;">
   <a class="load_slider_img" href="#x">
   <span id="img1">
    <img src="jq_slide-show/img/bruecken_02.jpg" width="450" height="300" />
   </span>
  </a>
 </div>
</div>

<div class="slide">
<h1>Dritte Br&uuml;cke</h1>
<p class="slider_content">Das ist Slide 3</p>
<br /><br />
<p><a href="#x">Weiter lesen &raquo;</a></p>
   <div style="position:absolute; left:250px;top:2px;">
    <a class="load_slider_img" href="#x">
   <span id="img1">
    <img src="jq_slide-show/img/bruecken_03.jpg" width="450" height="300" />
   </span>
  </a>
 </div>
</div>

<div class="slide">
<h1>DOWNLOAD</h1>
<p class="slider_content">Download Script</p>
<br /><br />
<p><a href="#x">
  <img src="jq_slide-show/img/button_demo-p.gif" border=0
  onmouseout='src="jq_slide-show/img/button_demo-p.gif"'
  onmouseover='src="jq_slide-show/img/button_demo-a.gif"'></p>
   <div style="position:absolute; left:250px;top:2px;">
   <a class="load_slider_img" href="#x">
  <span id="img1">
   <img src="jq_slide-show/img/bruecken_04.jpg" width="450" height="300" />
  </span>
 </a>
</div>
</div>
</div>

<a href="#" class="prev"><img src="jq_slide-show/img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
<a href="#" class="next"><img src="jq_slide-show/img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>
<img src="jq_slide-show/img/example-frame2.png" width="750" height="341" alt="Example Frame" id="frame">
</div>
</div>

Code der CSS-Datei (slide_style.css):

#container {
 width:750px;
 padding:10px;
 margin:0 auto;
 position:relative;
 z-index:0;
 }

#frame {
 position:absolute;
 z-index:0;
 width:750px;
 height:341px;
 top:-1px;
 left:-25px;
}

#example {
 width:750px;
 height:350px;
 position:relative;
}

/*
 Slideshow style
*/

#slides {
 position:absolute;
 top:-1px;
 left:49px;
 z-index:100;
}

.slides_container {
 width:603px;
 height:330px;
 overflow:hidden;
 position:relative;
 display:none;
}

#slides .slide {
 padding:20px;
 width:530px;
 height:230px;
 display:block;
 color:#ff0000;
 }

/*
 Next/prev buttons
*/
#slides .next,#slides .prev {
 position:absolute;
 top:127px;
 left:-33px;
 width:24px;
 height:43px;
 display:block;
 z-index:101;
}

#slides .next {
 left:610px;
}

/*
 Pagination
*/

.pagination {
 margin:10px auto 0;
 width:100px;
}

.pagination li {
 float:left;
 margin:0 1px;
 list-style:none;
}

.pagination li a {
 display:block;
 width:12px;
 height:0;
 padding-top:12px;
 background-image:url(img/pagination.png);
 background-position:0 0;
 float:left;
 overflow:hidden;
}

.pagination li.current a {
 background-position:0 -12px;
}

/*
 Footer
*/

#footer {
 text-align:center;
 width:580px;
 margin-top:9px;
 padding:4.5px 0 18px;
 border-top:1px solid #dfdfdf;
}

#footer p {
 margin:4.5px 0;
 font-size:1.0em;
}

/*
 Type and anchors
*/

a:link,a:visited {
 color:#599100;
 text-decoration:none;
}

a:hover,a:active {
 color:#599100;
 text-decoration:underline;
}

h1 {
 font-size:2em;
}

p {
 font-size:1.3em;
}

#slides .link {
 display:block;
 margin-top:10px;
 font-weight:800;
}
element.style {
 display: none;
 left: 0;
 margin-top: 0;
 position: absolute;
 top: 0;
 z-index: 10;
}
.slider_content {
 padding-left: 15px;
 padding-top: 30px;
 width: 300px;
 color:#000;
}

.slide img {
 bottom:0;
 right:0;
}