Glissement Horizontal slider avec jQuery et le toucher des dispositifs de soutien?

À mon avis iosSlider est incroyable. Il travaille dans presque n'importe quel appareil et il est bien documenté. Il est gratuit pour une utilisation personnelle, mais pour des sites commerciaux, les coûts de licence de 20$.

Également une bonne option est touchCarousel ou RoyalSlider du même auteur. Ces deux-là ont tout ce dont vous aurez besoin, mais aussi libre de ne pas et ont un prix de $10-12

Si j'étais vous, je voudrais mettre en œuvre ma propre solution basée sur le cas des spécifications. En fait, ce passage - c'est de la manipulation de contact vers le bas, touchez, touchez des événements. voici un extrait de ma propre bibliothèque pour la manipulation iPhone touch événements:

touch_object.prototype.handle_touchstart = function(e){
    if (e.targetTouches.length != 1){
        return false;
    }
    this.obj.style.zIndex = 100;
    e.preventDefault();
    this.startX = e.targetTouches[0].pageX - this.geometry.x;
    this.startY = e.targetTouches[0].pageY - this.geometry.y;
    /* adjust for left /top */
    this.bind_handler('touchmove');
    this.bind_handler('touchend');
}
touch_object.prototype.handle_touchmove = function(e) {
    e.preventDefault();
    if (e.targetTouches.length != 1){
        return false;
    }
    var x=e.targetTouches[0].pageX - this.startX;
    var y=e.targetTouches[0].pageY - this.startY;
    this.move(x,y);

}
touch_object.prototype.handle_touchend = function(e){
    this.obj.style.zIndex = 10;
    this.unbind_handler('touchmove');
    this.unbind_handler('touchend');
}

J'ai utilisé ce code pour "bouger les choses". Mais, au lieu de se déplacer, vous pouvez créer votre propre algorithme pour, par exemple, le déclenchement de rediriger vers un autre emplacement, ou vous pouvez utiliser ce mouvement de "déplacer/glisser" l'élément sur lequel le passage à un autre emplacement.

ainsi, il aide vraiment à comprendre les notions de base de la façon dont les choses fonctionnent et ensuite créer plus compliqué solutions. cela peut aider ainsi.

J'ai utilisé ceci, pour créer ma solution:

http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Prendre un coup d'oeil à iScroll v4 ici: http://cubiq.org/iscroll-4

Il peut ne pas être en jQuery, mais il fonctionne sur Desktop, Mobile et iPad, et assez bien; je l'ai utilisé sur de nombreux projets et l'a combiné avec jQuery.

Bonne Chance!

Avez-vous vu FlexSlider de WooThemes? Je l'ai utilisé sur plusieurs projets récents avec un grand succès. C'est tactiles trop donc il fonctionnera sur les deux souris les navigateurs web ainsi que de toucher les navigateurs basés sur iOS et Android.

Ive a trouvé un autre: http://swipejs.com/

semble fonctionner bien, cependant je rencontre un problème avec elle quand il est associé avec bootstrap sur la version OS X de Chrome. Si le total de la croix-compatibilité avec les navigateurs n'est pas un problème, alors vous êtes d'or.

Ce ressemble et utilise jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery

Et, la démo de http://demo.irinavelychko.com/tuts/jqm-dialog-gallery.html

Vous pourriez être intéressé par ce qui suit:

• Mobile jQuery Carrousel (github)
• jQuery Mobile

Je me rends compte que ce n'est pas un jQuery solution, mais Sencha Touch cadre est assez bon pour la construction de votre cible de l'INTERFACE utilisateur. Exemple (cliquez sur le Carrousel barre latérale lien):
http://dev.sencha.com/deploy/touch/examples/kitchensink/

Avec mon experiance la meilleure option open source sera UIKIT avec ses uikit composant slider.
et il est très facile à mettre en œuvre par exemple dans votre cas, vous pourriez faire quelque chose comme cela.

<div data-uk-slider>
<div class="uk-slider-container">
    <ul class="uk-slider uk-grid-width-medium-1-4"> //width of the elements
        <li>...</li> //slide elements
        ...
    </ul>
</div>