web-dev-qa-db-fra.com

Curseur de balayage horizontal avec prise en charge de jQuery et des appareils tactiles?

Je dois créer un curseur de produit comme celui-ci (voir la zone rouge).

Cela devrait fonctionner sur les navigateurs Desktop, iPad et Mobile. Connaissez-vous un plugin mobile jquery/jquery pour y parvenir?.

enter image description here

L'effet que je veux est presque similaire à celui-ci http://manos.malihu.gr/tuts/jquery_thumbnail_scroller.html (mais ce n'est pas compatible au toucher)

et exactement comme la section "Top 25" de l'application iPad d'Apple appelée "Trailers"

enter image description here

javascriptjqueryjquery-pluginscss3
46
Jitendra Vyas

À mon avis iosSlider est incroyable. Cela fonctionne dans presque tous les appareils et il est bien documenté. C'est gratuit pour un usage personnel, mais pour les sites commerciaux, la licence coûte 20 $.

Également une excellente option est touchCarousel ou RoyalSlider du même auteur. Ces deux ont tout ce dont vous aurez besoin, mais pas non plus gratuitement et ont un prix de 10-12 $

18
Jaime Fernandez

Je recommanderais aussi http://cubiq.org/iscroll-4

MAIS si vous ne creusez pas dessus, essayez ce plugin

http://www.zackgrossbart.com/hackito/touchslider/

il fonctionne très bien et utilise par défaut une barre de défilement horizontale sur le bureau - ce n'est pas aussi élégant sur le bureau qu'iscroll-4, mais il fonctionne très bien sur les appareils tactiles

BONNE CHANCE!

16
Thomas

Si j'étais vous, je mettrais en œuvre ma propre solution basée sur les spécifications de l'événement. Fondamentalement, il s'agit d'un balayage - il s'agit de la gestion des touchers, des déplacements tactiles, des retouches d'événements. Voici un extrait de ma propre bibliothèque pour la gestion des événements tactiles pour iPhone:

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 "déplacer les choses". Mais, au lieu de vous déplacer, vous pouvez créer votre propre algorithme, par exemple. déclenchant la redirection vers un autre emplacement, ou vous pouvez utiliser ce déplacement pour "déplacer/glisser" l'élément, sur lequel le balayage est effectué vers un autre emplacement.

alors, il est vraiment utile de comprendre les bases du fonctionnement des choses et ensuite de créer des solutions plus complexes. cela pourrait aussi aider.

Je l'ai utilisé pour créer ma solution:

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

15
jancha

Avez-vous essayé iosSlider? Il peut faire exactement ce dont vous avez besoin.

http://iosscripts.com/iosslider-jquery-horizontal-slider-for-iphone-ipad-safari/

10
Marcus

Jetez un oeil à iScroll v4 ici: http://cubiq.org/iscroll-4

Ce n'est peut-être pas jQuery, mais cela fonctionne très bien sur Desktop Mobile et sur iPad; Je l'ai utilisé sur de nombreux projets et combiné avec jQuery.

Bonne chance!

4
dSquared

Celui-ci pourrait répondre à vos besoins:
http://caroufredsel.frebsite.nl/

Ajouter jquery Touchwipe pour l'assistance tactile

Puis dans la configuration ajouter

scroll : {
wipe: true
}
2
Jörg Butzer

Avez-vous vu FlexSlider de WooThemes? Je l'ai utilisé sur plusieurs projets récents avec beaucoup de succès. Il est également tactile, il fonctionnera donc aussi bien sur les navigateurs basés sur la souris que sur les navigateurs tactiles sous iOS et Android.

2
DesignerBrent

J'ai trouvé un autre: http://swipejs.com/

semble fonctionner correctement, mais j’ai rencontré un problème lorsqu’il est associé à bootstrap sur la version OS X de Chrome. Si la compatibilité totale entre navigateurs n’est pas un problème, vous êtes alors doré.

1
MrShmee

J'ai fait quelque chose comme ça pour un de mes sites Web en développement.

J'ai utilisé StepCarousel pour le caroussel car c'est le seul que j'ai trouvé qui accepte une taille d'image différente dans le même carrousel.

En plus de cela pour ajouter l'effet de balayage tactile, j'ai utilisé le plugin jquery.touchswipe ;

Et stepcarousel déplace le panneau droit ou gauche avec une fonction pour que je puisse faire:

$("#slider-actu").touchwipe({
    wipeLeft: function() {stepcarousel.stepBy('slider-actu', 3);},
    wipeRight: function() {stepcarousel.stepBy('slider-actu', -3);},
    min_move_x: 20
});

Vous pouvez voir le rendu actuel sur cette page

J'espère que cela vous aidera.

1
Yoann

J'ai trouvé cela, j'espère que ça aide http://www.zackgrossbart.com/hackito/touchslider/

1
Sergio Majluf

Jetez un coup d'œil à la vue par défilement de jQuery (démo ici ). Here est le référentiel du hub git pour ce projet expérimental. Regardez leur code HTML pour voir quels fichiers doivent être inclus et quels attributs ajouter aux éléments que vous souhaitez faire défiler.

J'ai utilisé cela pour pouvoir faire défiler des éléments div horizontalement sur des appareils tactiles.

0
Challe

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

Je me rends compte que ce n’est pas une solution jQuery, mais cadre Sencha Touch est très utile pour la construction de votre interface utilisateur cible. Exemple (cliquez sur le lien carrousel ): http://dev.sencha.com/deploy/touch/examples/kitchensink/

0
moey

Avec mon expérience, la meilleure option open source sera UIKIT avec son composant du curseur uikit . et il est très facile à implémenter. Par exemple, dans votre cas, vous pourriez faire quelque chose comme ceci.

<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>
0
David Addoteye

Cela semble similaire et utilise jQuery mobile http://www.irinavelychko.com/tutorials/jquery-mobile-gallery

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

0
DBUK

Commander Portfoliojs jQuery plugin: http://portfoliojs.com

Ce plugin prend en charge les appareils tactiles, les ordinateurs de bureau et les navigateurs mobiles. En outre, il a une fonctionnalité de pré-chargement.

0
abhiomkar