Usage
By default it is set to "fade" effect with "6 seconds" duration.
$('#sample1').hyperslider();
<div id="sample1" class="hyperslider">
<div class="slides">
<div class="slide-box"><img src="images/1.jpg"></div>
<div class="slide-box"><img src="images/2.jpg"></div>
<div class="slide-box"><img src="images/3.jpg"></div>
<div class="slide-box"><img src="images/4.jpg"></div>
<div class="slide-box"><img src="images/5.jpg"></div>
</div>
<div class="slide-control">
<button class="slide-prev">Prev</button>
<button class="slide-next">Next</button>
</div>
</div>
<div id="sample2" class="hyperslider">
<div class="slides">
<div class="slide-box">
<img src="images/1.jpg">
</div>
<div class="slide-box">
<img src="images/2.jpg">
</div>
<div class="slide-box">
<img src="images/3.jpg">
</div>
<div class="slide-box">
<img src="images/4.jpg">
</div>
<div class="slide-box">
<img src="images/5.jpg">
</div>
</div>
<div class="slide-control">
<button class="slide-prev">
Prev
</button>
<button class="slide-next">
Next
</button>
</div>
</div>
Fade Effect
$('#sample1').hyperslider({
animation: 'fade',
autoplay: true,
delay: 5000,
controls: true,
navigation: true
});
Flash Effect
$("#sample2").hyperslider({
animation: "flash",
autoplay: true,
delay: 4000,
controls: true,
navigation: true
});
Slide Effect
$('#sample3').hyperslider({
animation: 'slide',
autoplay: true,
delay: 4000,
controls: true,
navigation: true
});
Other settings
You can also use the callback "before" and "after" settings
$('#sample3').hyperslider({
animation: 'slide',
autoplay: true,
delay: 4000,
controls: true,
navigation: true,
before: function(el, settings){
// code before
// the slider loads
},
after: function(el, settings){
// code after
// the slider loads
}
});
You can also enable the plugin via data-* attributes
<div id="sample4" class="hyperslider" data-hyperslider>
<div class="slides">
<div class="slide-box"><img src="images/1.jpg"></div>
<div class="slide-box"><img src="images/2.jpg"></div>
<div class="slide-box"><img src="images/3.jpg"></div>
<div class="slide-box"><img src="images/4.jpg"></div>
<div class="slide-box"><img src="images/5.jpg"></div>
</div>
<div class="slide-control">
<button class="slide-prev">Prev</button>
<button class="slide-next">Next</button>
</div>
</div>
<div id="sample4"
class="hyperslider"
data-hyperslider>
<div class="slides">
<div class="slide-box">
<img src="images/1.jpg">
</div>
<div class="slide-box">
<img src="images/2.jpg">
</div>
<div class="slide-box">
<img src="images/3.jpg">
</div>
<div class="slide-box">
<img src="images/4.jpg">
</div>
<div class="slide-box">
<img src="images/5.jpg">
</div>
</div>
<div class="slide-control">
<button class="slide-prev">
Prev
</button>
<button class="slide-next">
Next
</button>
</div>
</div>
Note: You can add other data attributes settings like the example below.
- data-hyperslider - this will automatically enable the plugin with it's default settings
- data-animation="slide" - fade, flash, slide
- data-autoplay="true" - enable/disable autoplay
- data-delay="7000" - 7000 milliseconds
- data-controls="true" - enable/disable prev/next
- data-navigation="true" - enable/disable slide navigation index
- data-before="function() { console.log('I am fired first!') }" - callback before the slide
- data-after="function() { console.log('I am fired after the slider loads!') }" - callback after the slide