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.

mouseSwipeWhy? 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

Advertisements

About torontographic

looking for work since 2009
This entry was posted in jQuery mouseSwipe and tagged , , , , , , . Bookmark the permalink.

3 Responses to mouseSwipe Jquery Touch Content Slider Plugin

  1. This info is priceless. How can I find out more?|

    Like

  2. Hollis says:

    you are really a excellent webmaster. The web site loading pace is
    amazing. It sort of feels that you are doing any
    unique trick. Furthermore, The contents are masterpiece.

    you’ve performed a great process in this subject!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s