Slide Viewer / Slideshow

I did Slide Viewer for all your needs. Please, dig into source to understanding functionality and using. It works without jQuery and other frameworks.

Hello,
this an example
how to you may create
slides with this script.
You need a code like this
...	in your html head section:		
 <link rel="stylesheet" type="text/css" media="screen" href="slideviewer.css" />
 <script type="text/javascript" src="slideviewer.js"></script>	
... in body: 
<div id="container1" class="container">
	<div class="prev"></div>
	<div class="next"></div>
	<div class="item">Hello, </div>
	<div class="item">this a sample</div>
</div>
<script type="text/javascript">
 var contentSliderObject1 = new SlideViewer('container1');
</script>
Free Download:
slideviewer.css
slideviewer.js
Let me know,
if you have installed this script
zoonman at gmail dot com
It's just for statistics,
no more
Thank you!

Some additional info

SlideViewer class has a three parameters:

  1. objectId — the ID attribute of parent DIV tag, which it is container
  2. speed — speed of fade effect, must be greater than zero. The default value is 10. The fade animation has a 25 steps. Summary time for animation approaches 10 * 25 = 250 ms plus some browser delays.
  3. changeDuration — the time between frame's changing. By default, that means 5000 milliseconds.

Full object initialization (JavaScript code): 

var c2 = new SlideViewer('container2', 50, 200);

See result of this code below:

Container 2. You may put everything in item 1
Container 2. You may put everything in item 2
Container 2. You may put

everything

in item 3
Container 2. You may put everything in item 4
Container 2. You may put everything in item 5
Container 2. The END.

Another example

var c2 = new SlideViewer('container2', 5, 20);
9
8
7
6
5
4
3
2
1
0

SlideViewer used on:

If you want to tell me about bugs, please contact with me by e-mail zoonman at gmail dot com.

June 3, 2011

← back to main page