Horizontal Swipe Slider with Jquery and Touch Devices Support

Javascript Gallery sliders that can be touch/swiped on mobile AND clicked and dragged on desktop?

After googling for a bit I answered my own question. Here's a good site http://www.iosscripts.com/iosslider/. The swiping/clicking works great on both my Mac laptop with 10.7.4 and on my iPhone 4 with iOS4.

Adding touch-swipe support to jquery based sliders

It is possible without switching to jQuery Mobile. I did so in this small project for school.

The way it's done is by using this library called jQuery UI Touch Punch which will simulate mouse events from touch devices. All you need to do is include the library under your jQuery includes like such: <script src="jquery.ui.touch-punch.min.js"></script>.

Add swipe support to JS slider

You can implement your own swipe functions with touchstart and touchend events. (It's not supported on desktop safari right now, but you can use mousedown and mouseup events on desktop).
Just add some eventlisteners to you element and watch the event pageX property.

let xPos;
const touchStart = (event) => {
  xPos = event.pageX;
};
const touchEnd = (event) => {
  if (event.pageX < xPos) {
  // you swiped left
  } else {
  // you swiped right
  }
};
window.addEventListener('touchstart', touchStart);
window.addEventListener('touchend', touchEnd);

Also you can use the touchmove event too for more complex and more advanced swipe implementation.

jQuery UI slider Touch & Drag/Drop support on Mobile devices

jQuery ui doesn't have touch support. You should use it with jQuery-ui touch punch.

Just add the script after jQuery ui:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>

You can also use cdnjs:

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

Note: Better give this repo a star on Github.

Can anybody recommend a slider a horizontal slider or carousel with variable image width support and touch support?

I would highly recommend Swiper.

http://www.idangero.us/sliders/swiper/

Check out their multi-width demo down on this page - the demo is titled 'Different Widths'

http://www.idangero.us/sliders/swiper/demos.php

This slider works beautifully on touch devices and has an awesome API!