1.0.3 • Public • Published


jQuery slider plugin that is supported "Parallax" effect.

npm version Bower version Join the chat at

  • Licenced under MIT
  • This plugin supports most browsers including Internet Explorer 8+, Chrome, Firefox, Safari and Opera.
  • And also tested on Safari for MAC Platform, It is definitely safe on the most modern Browsers!


Getting Started


This plugin needs jQuery library.

  • Check the jQuery library at here Recommend version 1.11.x higher
  • Also you need jQuery easing library at here for animation.
  • And insert this snippets
<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>
  • import pignose-parallaxslider files(css, js)
<link rel="stylesheet" href="dist/css/pignose.parallaxslider.min.css" />
<script type="text/javascript" src="dist/js/pignose.parallaxslider.min.js"></script>

If you use Bower

  1. open terminal and type those command line.
bower install pg-parallaxslider
  1. move dist/js/pignose.parallaxslider.min.js and dist/css/pignose.parallaxslider.min.css to your project folder.

If you use npm

  1. open a command line and type this
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>
        <!-- Slide Description Image Area (316 x 328) -->
        <div class="script-wrap">
            <ul class="script-group">
                <li><div class="inner-script"><img src="" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="" alt="thumbnail slider image" /></div></li>
                <li><div class="inner-script"><img src="" alt="thumbnail slider image" /></div></li>
            <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>


$(window).load(function() {
        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!

Package Sidebar


npm i pg-parallaxslider

Weekly Downloads






Last publish


  • kenneth-ceyer