pg-parallaxslider v1.0.3

PIGNOSE-ParallaxSlider

jQuery slider plugin that is supported "Parallax" effect.

• 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

Installation

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)

 ```html
 <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

2. 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

Usage

• Check demo and documents

Refer to below exhibit.

HTML

<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>

Javascript

$(window).load(function() {
	$('#visual').pignoseParallaxSlider({
		play    : '.btn-play',
		pause   : '.btn-pause',
		next    : '.btn-next',
		prev    : '.btn-prev'
	});
});

Options

Issues

We are wating for your requests.

Please report to us, If you find some problems.

Thank you!