PIGNOSE Parallaxslider

View project on the Github
  • slide image
  • slide image
  • slide image
  • slide image
  • slide image
  • slide image
  • thumbnail slider image
  • thumbnail slider image
  • thumbnail slider image
  • thumbnail slider image
  • thumbnail slider image
  • thumbnail slider image
prev slide start slide pause slide next slide

options

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.

bower

If you use bower.

bower install pg-parallaxslider

npm

If you use npm.

npm install pg-parallaxslider

sample

<div id="visual">
	<div class="slide-visual">
		<!-- Slide Image Area (1000 x 424) -->
		<ul class="slide-group">
			<li><img src="demo/img/visual_slide01.jpg" alt="slide image" /></li>
			<li><img src="demo/img/visual_slide02.jpg" alt="slide image" /></li>
			<li><img src="demo/img/visual_slide03.jpg" alt="slide image" /></li>
			<li><img src="demo/img/visual_slide04.jpg" alt="slide image" /></li>
			<li><img src="demo/img/visual_slide05.jpg" alt="slide image" /></li>
			<li><img src="demo/img/visual_slide06.jpg" alt="slide 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="demo/img/visual_slide_script01.jpg" alt="thumbnail slider image" /></div></li>
				<li><div class="inner-script"><img src="demo/img/visual_slide_script02.jpg" alt="thumbnail slider image" /></div></li>
				<li><div class="inner-script"><img src="demo/img/visual_slide_script03.jpg" alt="thumbnail slider image" /></div></li>
				<li><div class="inner-script"><img src="demo/img/visual_slide_script04.jpg" alt="thumbnail slider image" /></div></li>
				<li><div class="inner-script"><img src="demo/img/visual_slide_script05.jpg" alt="thumbnail slider image" /></div></li>
				<li><div class="inner-script"><img src="demo/img/visual_slide_script06.jpg" alt="thumbnail slider image" /></div></li>
			</ul>
			<div class="slide-controller">
				<a href="#" class="btn-prev"><img src="demo/img/btn_prev.png" alt="Prev Slide" /></a>
				<a href="#" class="btn-play"><img src="demo/img/btn_play.png" alt="Start Slide" /></a>
				<a href="#" class="btn-pause"><img src="demo/img/btn_pause.png" alt="Pause Slide" /></a>
				<a href="#" class="btn-next"><img src="demo/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'
	});
});
.pignose-parallaxslider {
	display: block;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
}

.pignose-parallaxslider,
.pignose-parallaxslider * {
	box-sizing: content-box;
	-o-box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
}

.pignose-parallaxslider .slide-visual {
	width: 1000px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}

.pignose-parallaxslider .slide-visual .slide_tint {
	position: absolute;
	top: 0;
	z-index: 50;
	width: 2000px;
	height: 100%;
	background-color: #ffffff;
	opacity: .6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
}

.pignose-parallaxslider .slide-visual .slide_tint.left {
	right: 1000px;
}

.pignose-parallaxslider .slide-visual .slide_tint.right {
	left: 1000px;
}

.pignose-parallaxslider .slide-visual .slide-group {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pignose-parallaxslider .slide-visual .script-wrap {
	width: 276px;
	height: 288px;
	padding: 20px;
	position: absolute;
	top: 36px;
	right: 100px;
}

.pignose-parallaxslider .slide-visual .script-wrap .script-inner {
	overflow: hidden;
	position: relative;
}

.pignose-parallaxslider .slide-visual .script-wrap .script-tint {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #ffffff;
	opacity: .6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination {
	width: 100%;
	*width: 84px;
	position: absolute;
	left: 0;
	*left: 50%;
	*margin-left: -62px;
	bottom: 0;
	padding: 40px 20px;
	z-index: 60;
	text-align: center;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page {
	display: inline-block;
	*display: block;
	*float: left;
	width: 8px;
	height: 8px;
	margin: 0 2px;
	border-radius: 50%;
	border: 1px solid #ffffff;
	text-indent: -10000px;
	overflow: hidden;
	-moz-transition: background-color .3s ease;
	-webkit-transition: background-color .3s ease;
	-o-transition: background-color .3s ease;
	transition: background-color .3s ease;
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page:hover,
.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page:focus {
	background-color: #ffffff;
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page.on {
	background-color: #ffffff;
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-controller {
	position: absolute;
	left: 0;
	bottom: 84px;
	width: 100%;
	text-align: center;
	z-index: 60;
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-controller a {
	display: inline-block;
	margin: 0 20px;
	opacity: .6;
	filter: alpha(opacity=60);
	-ms-filter: alpha(opacity=60);
	-moz-transition: opacity .3s ease;
	-webkit-transition: opacity .3s ease;
	-o-transition: opacity .3s ease;
	transition: opacity .3s ease;
}

.pignose-parallaxslider .slide-visual .script-wrap .slide-controller a:focus,
.pignose-parallaxslider .slide-visual .script-wrap .slide-controller a:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: alpha(opacity=100);
}

.pignose-parallaxslider .slide-visual .script-wrap .script-group {
	margin: 0;
	padding: 0;
	position: relative;
	list-style: none;
	z-index: 50;
	overflow: hidden;
}

.pignose-parallaxslider .slide-visual .script-wrap .script-group li {
	float: left;
}