Skip to content

Instantly share code, notes, and snippets.

@aklump
Last active December 14, 2015 17:59
Show Gist options
  • Save aklump/5126017 to your computer and use it in GitHub Desktop.
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
/**
* 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