I have been trying to figure this out. But I simply don't have enough knowledge about programming.

Question: How can I make Supersized Jquery Slider (ozio gallery) Smoother For Mobile Browser (Android)? (Smooth performance comparable to glide slider)

Context: I am trying to make ozio gallery (a full screen image slider) work in android mobile browser. This will be the back end of a simple web view app. Ozio gallery is a Joomla extension.

Problem: On android mobile browser, ozio's image sliding (when swiped on touch screen) is very choppy.

Target Solution: I need to make the sliding smoother for mobile.

More Info: There are other sliders (non Joomla) that work beautifully on mobile. Example: Glide slider

I think the codes within ozio can be adapted to perform better on mobile device. Am I wrong?

Will somebody please help?

EDIT 01: Found some more info. ozio gallery uses jquery.touchwipe.1.1.1.js to enable it to function in touch screen sliding. Is this the file that needs to be modified!!!!
DUDES!! I found it. (probably) (or may be not).

EDIT 02: (Formatting bold above for visibility) AND

Here is the code in jquery.touchwipe.1.1.1.js

(function($) { 

$.fn.touchwipe = function(settings) { var config = { min_move_x: 20, min_move_y: 20, wipeLeft: function() { }, wipeRight: function() { }, wipeUp: function() { }, wipeDown: function() { }, preventDefaultEvents: true };

 if (settings) $.extend(config, settings);

 this.each(function() {
     var startX;
     var startY;
     var isMoving = false;

     function cancelTouch() {
         this.removeEventListener('touchmove', onTouchMove);
         startX = null;
         isMoving = false;

     function onTouchMove(e) {
         if(config.preventDefaultEvents) {
         if(isMoving) {
             var x = e.touches[0].pageX;
             var y = e.touches[0].pageY;
             var dx = startX - x;
             var dy = startY - y;
             if(Math.abs(dx) >= config.min_move_x) {
                if(dx > 0) {
                else {
             else if(Math.abs(dy) >= config.min_move_y) {
                    if(dy > 0) {
                    else {

     function onTouchStart(e)
         if (e.touches.length == 1) {
             startX = e.touches[0].pageX;
             startY = e.touches[0].pageY;
             isMoving = true;
             this.addEventListener('touchmove', onTouchMove, false);
     if ('ontouchstart' in document.documentElement) {
         this.addEventListener('touchstart', onTouchStart, false);

 return this;



Related posts

Recent Viewed