CarouFredSel Plugin à l'aide de TouchSwipe avec des liens ne fonctionne pas

Je suis en utilisant le génial CarouFredSel JQuery carrousel plugin qui inclut des fonctionnalités pour l'intégration de la JQuery TouchSwipe bibliothèque pour les appareils de poche.

Le carrousel éléments sont divs, à l'intérieur de la div est une image et du texte enveloppé dans un <ahref> tag.

Tout fonctionne comme il se doit, mais j'ai remarqué que si le carrousel élément (dans ce cas un div) comprend un lien, le mouvement de balayage de l'effet sur différents périphériques mobiles ne fonctionne pas.

Si je supprime le lien autour de l'image/texte, le mouvement de balayage fonctionne très bien. C'est presque comme si preventDefault() travaille dans le sens inverse. Si je supprime le lien autour de l'image, et de laisser le texte comme un lien, le balayage travaille pour l'image, et non le texte.

Je peux facilement cliquez sur l'élément en tant que lien, j'ai juste ne peut pas glisser si c'EST un lien.

Quelqu'un a connu ce problème avec CarouFredsel en particulier?

Merci beaucoup, DONC.

OriginalL'auteur RCNeil | 2013-03-12

  1. 29

    Touchswipe est désactivé par défaut pour les éléments.

    Voir http://labs.rampinteractive.co.uk/touchSwipe/demos/Excluded_children.html

    À partir du lien:
    Par défaut, la valeur de $.fn.balayez.les valeurs par défaut.excludedElements est "bouton, input, select, textarea, .noSwipe, " Pour remplacer ou effacer la liste, nouveau le excludedElements tableau. Pour ajouter à cela, procédez de la manière suivante (n'oubliez pas la procédure par des virgules) ...

    excludedElements:$.fn.swipe.defaults.excludedElements+", #some_other_div" });

    J'ai juste changer les valeurs par défaut dans le plugin, car tous mes modals étaient les enfants d'un élément ancre.

    excludedElements:"button, input, select, textarea, .noSwipe"
    Wow man, merci pour cette! Alors, pour quand un élément sélectionné est appelé pour TouchSwipe, dire "swipecarousel", j'ai pu placer $('#swipecarousel').swipe({ excludedElements:"button, input, select, textarea, .noSwipe"; }) pour atteindre le résultat que je cherche?
    réponse courte: oui.
    Plus de réponse: Il y a une variable par défaut de la zone de jquery.touchSwipe.js où vous pouvez modifier $.fn.swipe.defaults.excludedElements si, comme moi, vous avez swipable menus plein de liens d'ancrage. Ensuite, vous n'avez pas à spécifier sur chaque élément.
    génial. c'est bon de savoir. merci!

    OriginalL'auteur Mike

  2. 8

    La carouFredSel avec < a > ne fonctionne pas pour moi bien avec swipe 'à l'intérieur.
    Vous pouvez utiliser excludedElements, mais sur l'Ipad, vous aurez à tenir votre doigt pour utiliser < a > (longTap). Ce n'est pas bon pour les utilisateurs. Si vous essayez d'utiliser carouFredSel({ balayage:( option { robinet: fonction ... il ne fonctionne pas (au moins dans mon cas).

    Ma solution est d'utiliser de balayage (touchSwipe) séparément:

    $(".carusel").swipe({
  excludedElements: "button, input, select, textarea, .noSwipe",
  swipeLeft: function() {
    $('.carusel').trigger('next', 4);
  },
  swipeRight: function() {
    $('.carusel').trigger('prev', 4);
  },
  tap: function(event, target) {
    window.open($(target).closest('.carusel-cnt').find('carusel-cnt-link').attr('href'), '_self');
  }
});
    +1 a parfaitement fonctionné. Tout simplement prendre l'une balise de les éléments exclus ne fonctionne pas sur Chrome Android, mais il a travaillé pour tout le reste. Ceci a travaillé pour tout.

    OriginalL'auteur Stanley Shauro

  3. 2

    Bien, j'aimerais vraiment savoir si en utilisant des liens au sein de TouchSwipe et la CarouFredSel plugin est possible, mais j'ai trouvé une solution qui semble fonctionner.

    J'espère que ça aidera quelqu'un.

    J'ai fini à l'aide d'une deuxième touche bibliothèque jquery, TouchWipe.

    Lorsque, l'appel de la CarouFredSel plugin, j'ai mis du passage de paramètre à true:

    $('#carousel-slider').carouFredSel({
        width: '100%',
        prev: '#prev-propslider',
        next: '#next-propslider',
        swipe: true
});

    Puis, appelant tous les TouchSwipe ET Touchwipe libaries (je ne sais pas si cela est important, mais je suis en utilisant la régulière TouchSwipe swipe:true paramètre pour un autre curseur sans liens), j'ai écrit une fonction distincte pour appeler des événements personnalisés pour les TouchWipe plugin:

    $('#carousel-slider').touchwipe({
        wipeLeft: function() {
            $('#carousel-slider').trigger('next', 1);
        },
        wipeRight: function() {
            $('#carousel-slider').trigger('prev', 1);
        }
});

    J'espère que cela aide quelqu'un, mais j'aimerais vraiment savoir si TouchSwipe et CarouFredSel peut travailler avec <a href> balises que je ne peux pas trouver n'importe quel travail exemples.

    OriginalL'auteur RCNeil

  4. 1

    Caroufredsel est déjà intégré et compatible avec touchswipe.

    1. Ajouter tochswipe bibliothèque js
    2. Ajouter les événements tactiles dans le caroufresel configuration

    JAVASCRIPT RÉSULTAT

     $(document).ready(function () {
     $('#foo2').carouFredSel({
         auto: false,
         responsive: false,
         items: {
             visible: 3,
             width: 100
         },
         width: 600,
         prev: '#prev2',
         next: '#next2',
         pagination: "#pager2",
         swipe: {
             onMouse: true,
             onTouch: true
         }
     });
 });

    Ici, c'est un travail de démonstration

    merci pour vos commentaires, mais ma question se rapporte à TouchSwipe et de ses fonctionnalités avec des liens, pas seulement en général. Votre démonstration contient pas de balises link, mais si il l'a fait, vous remarquerez que les fonctions magnétiques (au moins avec les doigts sur les appareils mobiles) ne fonctionnent pas. C'est ce que ma question est concernant.

    OriginalL'auteur Ignacio Correia

  5. 1

    Merci pour les solutions avec le excludedElements, qui a résolu mon problème. Jamais pensé à ça.

    Mais vous n'avez pas à utiliser l'touchwipe Plugin séparément, il y a "glisser.les options" comme une option de configuration pour touchswipe dans le caroufredsel plugin.
    Voir le caroufredsel options

    Là, vous pouvez utiliser tous les les options du plugin touchswipe, je pense.

    OriginalL'auteur Sabrina

  6. 0

    Vous pouvez utiliser en dessous de fonction pour activer cliquez sur après coup.

    `$('.class').swipe({
  swipe: function(event, direction, distance, duration, fingerCount) {},
  click: function(event, target) {
    $(target).click();
  },
  threshold: 75
});`

    https://stackoverflow.com/a/11919170/3223427

    OriginalL'auteur user3223427