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).


  • 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; });

    HORIZ: true,

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

    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>

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 –  complete source December 24th, 2012

About torontographic

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

6 Responses to mouseSwipe Jquery Touch Content Slider Plugin

  1. Cbd Tincture says:

    I seriously appreciate your efforts and I’ll return for your further blogs. I’ve taken note of this advice and I plan on applying it next time I am at work. Thank you for helping to make my day epic. A cool website.


  2. Thanks for the distinct tips discussed on this weblog. I have seen that many insurance providers offer prospects generous discount rates if they opt to insure many cars together. A significant amount of households include several motor vehicles these days, particularly those with more mature teenage kids still residing at home, plus the savings for policies can certainly soon mount up. So it makes sense to look for a great deal.


  3. Jesse Grillo says:

    I am bored to death at work so I decided to browse your blogs on my iphone during lunch break. Your write up is really useful to me. good website. It is rare to see a nice post like this one these days.


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


  5. 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!


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s