English documentation: prototype image slider/rotator by Klinger-webDESIGN

Step 1 - Setup

Include JavaScript- and CSS-files into the <head>-section of your website

<script type="text/javascript" src="js/prototype.js" ></script>
<script type="text/javascript" src="js/scriptaculous.js" ></script>
<script type="text/javascript" src="js/effects.js" ></script>
<script type="text/javascript" src="js/slider.js" ></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />

Insert prototype slider source code to your website. Insert every new pic into an new <li>-tag and add a new link with incrementing number to the <div> with id="paging"

<div id="sliderFrame">
   <ul id="slider">
      <li class="sliderItem" id="sliderItem-1" rel="1">
         <div class="sliderImg">
            <img src="images/img_1.jpg" alt="Stylische Tastatur">
         </div>
         <div class="sliderContent">
            <h2>Stylische Tastatur</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
         </div>
      </li>
      <li class="sliderItem" id="sliderItem-2" rel="2">
         <div class="sliderImg">
            <img src="images/img_2.jpg" alt="Sonnenuntergang">
         </div>
         <div class="sliderContent">
            <h2>Sonnenuntergang</h2>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
         </div>
      </li>
      <li class="sliderItem" id="sliderItem-3" rel="3">
         <div class="sliderImg">
            <img src="images/img_3.jpg" alt="Schmetterling">
         </div>
            <div class="sliderContent">
               <h2>Schmetterling</h2>
               <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
         </div>
      </li>
   </ul>
   <div id="paging" style="display:none;" >
      <a href="#" rel="1" class="paging Pages">1</a>
      <a href="#" rel="2" class="paging Pages">2</a>
      <a href="#" rel="3" class="paging Pages">3</a>
      <a href="#" id="sliderStartStop" rel="sliderStartStop" class="Pages">stop</a>
   </div>
</div>

Last action for the setup is adding the JavaScript-call at the end of your page before the closing <body>-tag.

<script type="text/javascript">
   document.observe("dom:loaded", function() { 
      initSlider();				
   });
</script>

Step 2 - Customize the slider

The height of "#sliderFrame" inside the CSS-file is equivalent to the height of the slider without navigation - navigation will be loaded by JavaScript. If no JavaScript is active, the slider won´t work and the navigation would be useless.
The new height which is set inside the initSlider()-function is equivalent to the slider height with navigation.
The width of "#sliderFrame" inside the CSS-file is equivalent to the "move"-value of the initSlider()-function. Attention: don´t forget the minus in front of the value!
The rotation speed can be controled by variable "delay".

Step 3 - enjoy the result!

I´ll apreciate your feedback! You can send me a comment: http://www.klinger-webdesign.de

View Demo