awesome parallax slider
MIT License
jQuery slider plugin that is supported "Parallax" effect.
This plugin needs
jQuery
library.
Recommend version 1.11.x higher
<script type="text/javascript" src="[[Your directory for javascript]]/jquery.latest.min.js"></script>
<script type="text/javascript" src="[[Your directory for javascript]]/jquery.easing.js"></script>
<link rel="stylesheet" href="dist/css/pignose.parallaxslider.min.css" />
<script type="text/javascript" src="dist/js/pignose.parallaxslider.min.js"></script>
bower install pg-parallaxslider
dist/js/pignose.parallaxslider.min.js
and dist/css/pignose.parallaxslider.min.css
to your project folder.npm install pg-parallaxslider
Refer to below exhibit.
<div id="visual">
<div class="slide-visual">
<!-- Slide Image Area (1000 x 424) -->
<ul class="slide-group">
<li><img src="assets/img/visual_slide01.jpg" alt="slider image" /></li>
<li><img src="assets/img/visual_slide02.jpg" alt="slider image" /></li>
<li><img src="assets/img/visual_slide03.jpg" alt="slider image" /></li>
<li><img src="assets/img/visual_slide04.jpg" alt="slider image" /></li>
<li><img src="assets/img/visual_slide05.jpg" alt="slider image" /></li>
<li><img src="assets/img/visual_slide06.jpg" alt="slider image" /></li>
</ul>
<!-- Slide Description Image Area (316 x 328) -->
<div class="script-wrap">
<ul class="script-group">
<li><div class="inner-script"><img src="http://placehold.it/276x288/f8f8f8/b71200" alt="thumbnail slider image" /></div></li>
<li><div class="inner-script"><img src="http://placehold.it/276x288/f8f8f8/b71200" alt="thumbnail slider image" /></div></li>
<li><div class="inner-script"><img src="http://placehold.it/276x288/f8f8f8/b71200" alt="thumbnail slider image" /></div></li>
<li><div class="inner-script"><img src="http://placehold.it/276x288/f8f8f8/b71200" alt="thumbnail slider image" /></div></li>
<li><div class="inner-script"><img src="http://placehold.it/276x288/f8f8f8/b71200" alt="thumbnail slider image" /></div></li>
<li><div class="inner-script"><img src="http://placehold.it/276x288/f8f8f8/b71200" alt="thumbnail slider image" /></div></li>
</ul>
<div class="slide-controller">
<a href="#" class="btn-prev"><img src="assets/img/btn_prev.png" alt="prev slide" /></a>
<a href="#" class="btn-play"><img src="assets/img/btn_play.png" alt="start slide" /></a>
<a href="#" class="btn-pause"><img src="assets/img/btn_pause.png" alt="pause slide" /></a>
<a href="#" class="btn-next"><img src="assets/img/btn_next.png" alt="next slide" /></a>
</div>
</div>
</div>
</div>
$(window).load(function() {
$('#visual').pignoseParallaxSlider({
play : '.btn-play',
pause : '.btn-pause',
next : '.btn-next',
prev : '.btn-prev'
});
});
name | value | default | description |
---|---|---|---|
speed | number |
1200 | the millisecond time for speed of the slide animation. |
interval | number |
3000 | the millisecond time for interval of the slide animation. |
direction | string |
right | the direction of slide animation. |
diffTime | number |
300 | the millisecond time that you want to put between main view and sub view as a parallax. |
controlAnim | boolean |
true | if you set this property to false, this plugin will ignore the status of animation queue. |
pagination | boolean |
true | if you set this property to true, pagination controller will show. |
auto | boolean |
true | if you set this property to true, this slider will start automatically. |
isLocal | boolean |
true | this property set that each of controllers(play, stop, prev and next) is belong local of those container or not. |
play | jQuery object |
null | the jQuery object of play button. |
pause | jQuery object |
null | the jQuery object of pause button. |
next | jQuery object |
null | the jQuery object of next button. |
prev | jQuery object |
null | the jQuery object of prev button. |
afterMove | callback |
null | this callback will be called after slider moved. |
We are wating for your requests.
Please report to us, If you find some problems.
Thank you!