My favorites | Sign in
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
Library_Slideshow  
A slide show component
Updated Sep 17, 2012 by felk...@gmail.com

Basic Usage

<div id="myslideshow" class="slideshow-container">

   <img src="1.jpg" class="slide">
   <img src="2.jpg" class="slide">
   <img src="3.jpg" class="slide">

</div>

<script type="text/javascript">

   var myslideshow = new Slideshow({
      container:'myslideshow',
      autostart:true
   });

</script>

Options

You can pass the following options:

  • container | string | ID of containing element | required
  • autostart | bool| Start automatically (default false)
  • duration | float | Time for each slide (default 5)
  • loop | bool| Makes the slideshow loop (default false)
  • revers | bool| Makes the slideshow play backwards (default false)

Setting Up Controls

Here we can see how to register controls and manage the onclick events

<div id="myslideshow-next">next</div>
<div id="myslideshow-prev">prev</div>
		
   <div id="myslideshow" class="slideshow-container">
      <div class="slide">ABC</div>
      <div class="slide">123</div>
   </div>
		
<script type="text/javascript">
		
myslideshow = new Slideshow({
   container:'myslideshow',
   autostart:true,
   loop:true
});
		   
$('myslideshow-next').on('click',function() {
   myslideshow.stop();
   myslideshow.next_slide();
   myslideshow.start();	
});
		   
$('myslideshow-prev').on('click',function() {
   myslideshow.stop();
   myslideshow.previous_slide();
   myslideshow.start();	
});
	
</script>
Powered by Google Project Hosting