mouseSwipe Jquery Touch Content Slider Plugin

mouseSwipe is a jQuery content slider with tablet touch or mouse drag navigation. It weights in at under 4kb in size.

Uploaded new zip with source Sept. 7th 2016.
Added miniSwipe for modern browser (no panels or arrows) 80 lines of code.
Sorry, I will not be replying to questions on this plugin as I’m too busy.

Why? Because your panel swipes should work all your devices including the desktop browser. (not just ccs3 devices).

It’s also great to add as a fixed container in jquery mobile and other mobile html pages. I used it on a Honda jquery mobile phone app I developed to display huge horizontal grid tables on a small screen (fake iframe).

features:

• Tablet touch swipe or mouse drag swipping.
• Horizontal or Vertical layout.
• Continuous Scroll with end bounce.
• Or single panel image swipe.
• Multiple mouseSwipes on single page.
• Auto scroll with or without rewind.

April 16 2012 update:
This is version 1.0.2 so any input is welcome (don’t complain, its free)

Leave a comment

Tested on the following browers:

1. IE9 and IE6,7,8 using IETester.
2. Firefox 10.0.2
3. Safari 5.1.1
4. Chrome 17.0
5. Opera 11.61
6. iPod touch and Android touch default browsers

Settings and defaults:

• HORIZ: true or false – horizontal or vertical display. / default = true.
• TYPE: ‘mouseSwipe’ – drag scroll or touch swipe one or more panels.
• TYPE: ‘panelSwipe’- swipe slides one panel length at a time. / default = ‘mouseSwipe’
• SNAPDISTANCE: number – pixel distance before panel changes. / default = 20
• DURATION: number – time it takes for next panel to slide in. / default = 250
• EASING: string – must include jquery.easing.1.3.js types or / default = ‘swing’
• ARROWS: true or false – display button arrows on sides of panel / default = false
• FADEARROWS: true or false – do not show first or last panel arrows / default = false
• SLIDESHOWTIME: number – auto scroll time in milliseconds / default = 4000
• AUTOSTART: number > 0 – delay before autoscroll starts on load / default = 0
• PAUSEONHOVER: true or false – stop auto slide on mouseover hover / default = false
• PAGENUM: string – id of div or element to display page# / default = ‘#pagenum’

The Javascript setup:

We use bind dragstart to stop some browser’s drag & drop features.
panelSwipe example:

$(document).ready(function () {

  $(document).bind("dragstart", function() { return false; });

  $('#panelSwipe').swipe({
    TYPE:'panelSwipe',
    HORIZ: true,
    SNAPDISTANCE:20,
    DURATION:750,
    EASING:'easeOutBack',
    ARROWS:true,
    FADEARROWS:false,
    SLIDESHOWTIME:4000,
    AUTOSTART:100,
    PAUSEONHOVER:false,
    PAGENUM:'#pagenum'
  });
});

mouseSwipe example:
note that TYPE:’mouseSwipe’ does not use any of the other options.

$('#mouseSwipe').swipe({
    TYPE:'mouseSwipe',
    HORIZ: true
});

The CSS Setup:

You only need to match the width and height for the Viewport, mouseSwipe and Panel.

<div id="viewport">
<div id="mouseSwipe">
<div class="panel"><img alt="" src="images/01.jpg" /></div>
<div class="panel"><img alt="" src="images/02.jpg" /></div>
<div class="panel"><img alt="" src="images/03.jpg" /></div>
<div class="panel"><img alt="" src="images/04.jpg" /></div>
<div class="panel"><img alt="" src="images/05.jpg" /></div>
</div>
</div>

Fixes to Date:

December 24 2012: 5:15pm est:
Upload new zip with complete original source.  Do as you wish with it as I have no time.

April 16 2012 : 10:30am est:
Revision: 1.0.2 Had to add e.preventDefault() on touchStart=function(e) for older versions of Android to scroll properly.

February 28 2012 : 1:00 est. new version 1.0.1
1. Removed PERCENTAGE option in favour of SNAPDISTANCE and added a lot more panel swipe options. Improved animate stop() during mousedown.

View Demo

Download mouseSwipe zip file – mouseSwipe.zip  complete source December 24th, 2012