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>