Slide Viewer / Slideshow

I made Slide Viewer back in 2008. The goal was to have a simplest implementation to display various elements in the style of slideshow. The script is working 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:
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:

  • http://www.mastermebel-st.ru/
  • http://www.progimp.ru/

Comments:

You can left first comment.

For commenting you should proceed to enter or register on the site.