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)
Tested on the following browers:
- IE9 and IE6,7,8 using IETester.
- Firefox 10.0.2
- Safari 5.1.1
- Chrome 17.0
- Opera 11.61
- 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.
Download mouseSwipe zip file – mouseSwipe.zip complete source December 24th, 2012
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.
LikeLike
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.
LikeLike
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.
LikeLike
This info is priceless. How can I find out more?|
LikeLike
http://celine.blackfriday.in.net/
LikeLike
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!
LikeLike