Last active
December 14, 2015 17:59
-
-
Save aklump/5126017 to your computer and use it in GitHub Desktop.
jQuery plugin for a fancy left/right slider for prev/next type browsing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Swiper jQuery Plugin | |
* | |
* You need to also include: | |
http://www.netcu.de/jquery-touchwipe-iphone-ipad-library | |
* | |
* @code | |
* <script> | |
* $('.track').swiper({ | |
* 'trainClass': 'train', | |
* 'distance': 100, | |
* 'speed': 300, | |
* }); | |
* </script> | |
* | |
* <div class="track"> | |
* <div class="train"> | |
* <div class="default">Default Text</div> | |
* <a href="/" class="left">Left Text</a> | |
* <a href="/" class="right">Right Text</a> | |
* </div> | |
* </div> | |
* | |
* @endcode | |
* | |
* @param options | |
* - trainClass: the class of the element that is to move along the track | |
* - speed: in milliseconds | |
* - distance: the travel distance in pixels | |
* - easing: the easing animation string | |
* | |
* @return $(this) | |
* | |
* @author Aaron Klump, In the Loft Studios, LLC | |
* @see http://www.netcu.de/jquery-touchwipe-iphone-ipad-library | |
* @see http://www.intheloftstudios.com | |
* @see http://gist.github.com/5126017 | |
*/ | |
(function($) { | |
$.fn.swiper = function(options) { | |
// Create some defaults, extending them with any options that were provided | |
var settings = $.extend( { | |
'trainClass' : 'content', | |
'travel' : 60, | |
'speed' : 300, | |
'easing' : 'swing' | |
}, options); | |
var $track = $(this); | |
var $train = $track.find('.' + settings.trainClass); | |
if ($train.length === 0) { | |
return $(this); | |
} | |
function moveSwiper(distance, callback) { | |
var current = $train.css('left'); | |
if (Number(current) !== distance) { | |
$train.animate({'left': distance + 'px'}, settings.speed, settings.easing, callback); | |
} | |
} | |
function resetSwiper() { | |
moveSwiper(0); | |
$track | |
.removeClass('moved-left') | |
.removeClass('moved-right') | |
$track.find('.default').show(); | |
$track.find('.left, .right').hide(); | |
} | |
function moveLeft() { | |
$track.removeClass('moved-right'); | |
$track.addClass('moved-left'); | |
$track.find('.left').show(); | |
$track.find('.default, .right').hide(); | |
moveSwiper(-1 * settings.travel); | |
} | |
function moveRight() { | |
$track.removeClass('moved-left'); | |
$track.addClass('moved-right'); | |
$track.find('.right').show(); | |
$track.find('.default, .left').hide(); | |
moveSwiper(settings.travel); | |
} | |
var midpoint = $(window).width() / 2; | |
$track.mousemove(function(e){ | |
if (e.pageX < midpoint | |
&& !$track.hasClass('moved-left')) { | |
moveLeft(); | |
} | |
else if (e.pageX > midpoint | |
&& !$track.hasClass('moved-right')) { | |
moveRight(); | |
} | |
}); | |
$track.hover(function(e) { | |
if (e.pageX < midpoint) { | |
moveLeft(); | |
} | |
else if (e.pageX > midpoint) { | |
moveRight(); | |
} | |
}, function() { | |
resetSwiper(); | |
}); | |
$track.touchwipe({ | |
wipeLeft: function() { | |
moveLeft(); | |
}, | |
wipeRight: function() { | |
moveRight(); | |
} | |
}); | |
return $(this); | |
}; | |
})(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment