backflip / jquery-carousel

Yet Another jQuery Carousel / Slider Thingy. Responsive and with touch support. Extensive options like adapting the height based on currently visible items.
GNU General Public License v2.0
38 stars 13 forks source link

circular mode and touch #8

Open jchautreux opened 10 years ago

jchautreux commented 10 years ago

In circular mode, there is an issue when you want to swipe 2 slides in one time. to reproduce: swipe one time to the left and swipe another time before end of the first transition. After that each another swipe move the slides slowly and the slides shifting and transitions are broken. to correct: simply remove transition css prop on touchstart.

correcting touch start event:

          events[utils.getNamespacedEvents('touchstart')] = function(e) {
                var event = e.originalEvent.targetTouches[0],
                     endEvent = utils.getNamespacedEvents(utils.getTransitionEndEvent());
                // trigger endEvent to be sure that no transition is effective
                self.$dom.slider.trigger(endEvent);

                coords.start.x = event.pageX;
                coords.start.y = event.pageY;

                sliderOffset = self.$dom.slider.position();

                time.start = new Date().getTime();

                isSwiping = false;
                isScrolling = false;
            };
jchautreux commented 10 years ago

and for the android native browser, the goTo method must be updated with this (in replacement of the onEndEvent):

                 this.$dom.slider.on(endEvent, function() {
                        self.$dom.slider.off(endEvent);
                        if( oldTransition !== '')
                            self.$dom.slider.css(prop, oldTransition);
                        else
                            self.$dom.slider.css(prop, '0s');

                        callback();
                    });
backflip commented 10 years ago

Thanks for reporting! I will have a look in the next few days.

backflip commented 10 years ago

With the latest release, I disabled the navigation while the carousel is sliding (there were problems on non-touch devices, too). So this should not be an issue anymore.

However, I will overhaul the whole transition part anyway (it should definitely use transforms instead of animating the position property, e.g.).