Skip to content

Instantly share code, notes, and snippets.

@sebastiandro

sebastiandro/index.html

Created April 7, 2012 09:36
Show Gist options
  • Save sebastiandro/2326842 to your computer and use it in GitHub Desktop.
Save sebastiandro/2326842 to your computer and use it in GitHub Desktop.
Download ZIP
Pulp Slider
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pulp Slider</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/libs/modernizr-2.5.2.min.js"></script>
<script src="js/libs/jquery-1.7.1.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<header>
</header>
<div id="main">
<div id="contentWrap">
<div id="logo"></div>
<div id="slider">
<ul>
<li><img src="img/2.jpg" alt="slider" /></li>
<li><img src="img/1.jpg" alt="slider" /></li>
<li><img src="img/3.jpg" alt="slider" /></li>
<li><img src="img/4.jpg" alt="slider" /></li>
<li><img src="img/5.jpg" alt="slider" /></li>
</ul>
</div>
<!-- <nav role="navigation">
<div id="prevBtn" data-dir="prev" class="btn"></div>
<ul>
</ul>
<div id="nextBtn" data-dir="next" class="btn"></div>
</nav> -->
</div><!--//contentWrap-->
</div>
<footer>
</footer>
<script src="js/script.js"></script>
<script>
$(function(){
pulpSlider('#slider');
});
</script>
</body>
</html>
Raw
scripts.js
/*
* jQuery Pulp Slider v1.0.0
* http://kulori.com
*
* Copyright 2012, Sebastian Nilsson
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*
* February 2012
*/
var pulpSlider = function(element, options){
var settings = $.extend({}, $.fn.pulpSlider.defaults, options);
/* Get Slider */
$slider = $(element);
$slider
.css('position', 'relative')
.addClass('pulpSlider');
/* Slider Container */
$container = $slider.find('ul');
imgs = $container.find('img');
var vars = {
currentSlide : 0,
imgLength : imgs.length,
imgWidth : 600,
animating : false,
paused : false
};
/************************************************************
Navigation
************************************************************/
initNav = function(){
//Hide nav if there's only one pic or if hideNav is true
if(!settings.hideNav && vars.imgLength > 1) {
$slider.after('<nav><ul></ul></nav>'); //Add navigation wrap
$nav = $slider.parent().find('nav'); //Cache Nav
$nav.attr('id', 'sliderNav');//Add id to the Nav
$navul = $nav.find('ul'); //Cache Nav UL
$navul.prepend('<div id="prevBtn" class="btn" data-dir="prev">');
for(var i = 0; i < vars.imgLength; i++){
$navul.append('<li class="dot">');
$nav.find('li.dot').eq(i)
.attr('id', i)
.attr('data-pos', i);
}
//Add Next Button
$navul.append('<div id="nextBtn" class="btn" data-dir="next">');
//Last update the nav position and add the nav
updateNav();
}
}
updateNav = function(){
if(!settings.hideNav && vars.imgLength > 1) {
$nav.find('li[id="' + vars.currentSlide + '"]')
.siblings().removeClass('current').end()
.addClass('current')
}
}
/* Set Current Slider Position */
setCurrent = function(dir){
var pos = vars.currentSlide;
if(dir != 'next' && dir != 'prev'){
vars.currentSlide = dir;
} else {
pos += (~~(dir === 'next') || -1 )
vars.currentSlide = (pos < 0) ? vars.imgLength -1 : pos % vars.imgLength;
}
return pos;
}
/* Keyboard Navigation */
if(settings.keyboardNav){
$(window).keydown(function(event){
//Prev
if(event.keyCode == '37'){
runSlider('prev');
}
//Next
if(event.keyCode == '39'){
runSlider('next');
}
});
}
/* Pause on Hover */
if(settings.pauseOnHover){
/* Stop animation from running when slider is hovered */
$slider.hover(function(){
vars.paused = true;
clearInterval(timer);
timer = '';
}, function(){
/* When the mouse exits the slider, check if the timer is zeroed before running animation.
This prevents effect stacking */
vars.paused = false;
if(timer == '' && !settings.manualAdvance){
timer = setInterval(function(){
setCurrent('next');
pulpAnimation();
updateNav();
}, settings.pauseTime);
}
});
}
/************************************************************
Animation
************************************************************/
pulpAnimation = function(){
if(!vars.animating){
vars.animating = true;
$container.stop().animate({
'margin-left' : -(vars.currentSlide * vars.imgWidth)
}, settings.animSpeed, settings.easing, function(){
if(timer == '' && !settings.manualAdvance){
timer = setInterval(function(){
setCurrent('next');
pulpAnimation();
updateNav();
}, settings.pauseTime);
}
vars.animating = false;
});
}
}
//If manual advance is turned off and the slider has more than one image, go for it!
if(!settings.manualAdvance && vars.imgLength > 1){
var timer = 0;
timer = setInterval(function(){
setCurrent('next');
pulpAnimation();
updateNav();
}, settings.pauseTime);
}
/************************************************************
Events
************************************************************/
runSlider = function(dir){
if(!vars.animating && !vars.paused){
setCurrent(dir);
clearInterval(timer);
timer = '';
pulpAnimation();
updateNav();
}
}
//Prev or next btns
$slider.parent().on('click', '.btn', function(){
runSlider($(this).data('dir'));
});
//Nav dots
$slider.parent().on('click', '.dot', function(){
runSlider($(this).data('pos'));
});
/************************************************************
Last Call
************************************************************/
initNav();
return this;
settings.afterLoad.call(this);
};
$.fn.pulpSlider = function(options){
return this.each(function(key, value){
var element = $(this);
if (element.data('pulpSlider')) return element.data('pulpSlider');
var pulpSlider = new pulpSlider(this, options);
element.data('pulpSlider', pulpSlider);
});
}
$.fn.pulpSlider.defaults = {
effect : 'slider',
animSpeed : 600,
pauseTime : 3000,
keyboardNav : false,
pauseOnHover : true,
manualAdvance : false,
hideNav : false,
easing : 'swing'
}
$.fn._reverse = [].reverse;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment