A minimal full screen slideshow jquery plugin intended for use in other projects as a boilerplate or just as is.
characteristics:
- easy to adjust
- supports only newer browsers
- css3 transitions
- only one slideshow per page
- manually trigger sliding
- play / pause
- add pause/play to default initialized buttons
- move more variables to options
- add loading icon
- firefox, ie10
- jquery
- require jquery & fs-slideshow script
- add markup for the content:
<ol class="fs-slideshow">
<li>
<img class="fs-bg" alt="Cairn" src="img/Cairn_by_Sylvain_Naudin.jpg">
This is the first slide.
</li>
<li>
<img class="fs-bg" alt="Green Plant" src="img/Green_Plant_by_Simon_Schlegl.jpg">
This is the second slide.
</li>
<li>
<img class="fs-bg" alt="H" src="img/H_by_Manuel_Sagredo.jpg">
This is the third slide.
</li>
</ol>
- add markup for the buttons (optional):
<div class="fs-prev">
<a href="#">BACK</a>
</div>
<div class="fs-next">
<a href="#">NEXT</a>
</div>
- initialize plugin
// on document load
$(function() {
$('.fs-slideshow').fsSlideshow();
});
options
(Object): Initialize slideshow with given options
$('.fs-slideshow').fsSlideshow({
shuffle: true,
autoPlay: true
});
slideIndex
(Number): Show slide with index
// show 3rd slide
$('.fs-slideshow').fsSlideshow(2);
next
(String): Show next slide
$('.fs-slideshow').fsSlideshow('next');
prev
(String): Show previous slide
$('.fs-slideshow').fsSlideshow('prev');
play [, timeout]
(String, Number): Show next slide with an interval oftimeout
(default 5000ms)
$('.fs-slideshow').fsSlideshow('play');
$('.fs-slideshow').fsSlideshow('play', 8000);
pause
(String): Pause playback
$('.fs-slideshow').fsSlideshow('pause');