web-dev-qa-db-fra.com

CarouFredSel Plugin utilisant TouchSwipe avec des liens qui ne fonctionnent pas

J'utilise le plugin CarouFredSel JQuery impressionnant qui inclut des fonctionnalités permettant d'intégrer la bibliothèque JQuery TouchSwipe pour les périphériques de poche. 

Les éléments du carrousel sont des divs. Dans le div, il y a une image et du texte dans une balise <ahref>. 

Tout fonctionne comme il se doit, mais j'ai remarqué que si l'élément du carrousel (dans ce cas, un div) inclut un lien, l'effet de balayage sur divers appareils mobiles ne fonctionne pas. 

Si je supprime le lien autour de l'image/du texte, le mouvement de balayage fonctionne correctement. C'est presque comme si preventDefault() fonctionnait en sens inverse. Si je supprime le lien autour de l'image et que je laisse le texte sous forme de lien, le balayage fonctionne pour l'image et non pour le texte. 

Je peux facilement cliquer sur l'élément en tant que lien. Je ne peux simplement pas glisser s'il IS un lien. 

Quelqu'un at-il rencontré ce problème avec CarouFredsel en particulier?

Merci beaucoup, SO. 

touchcaroufredsel
14
RCNeil

Touchswipe est désactivé par défaut pour un élément.

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

Depuis le lien: Par défaut, la valeur de $ .fn.swipe.defaults.excludedElements est "bouton, entrée, sélection, textarea, a, .noSwipe," Pour remplacer ou effacer la liste, définissez à nouveau les exclus tableau. Pour l’ajouter, procédez comme suit (n’oubliez pas la virgule précédente) ...

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

J'ai fini par changer les paramètres par défaut dans le plugin, car tous mes modaux étaient des enfants d'un élément d'ancrage.

excludedElements:"button, input, select, textarea, .noSwipe"
29
Mike

Le carouFredSel avec <a> ne fonctionne pas bien avec le glissement "dedans". Vous pouvez utiliser excludedElements , mais sur Ipad vous devrez tenir votre doigt pour utiliser <a> (longTap). Ce n'est pas bon pour les utilisateurs. Si vous essayez d'utiliser carouFredSel ({swipe :( option {tap: function ... cela ne fonctionnera pas (du moins dans mon cas). 

Ma solution consiste à utiliser swipe (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');
  }
});
8
Stanley Shauro

J'aimerais vraiment savoir s'il est possible d'utiliser des liens dans TouchSwipe et dans le plug-in CarouFredSel, mais j'ai trouvé une solution de contournement qui semble fonctionner. 

Espérons que cela aidera quelqu'un. 

J'ai fini par utiliser une deuxième bibliothèque tactile, TouchWipe . 

Lorsque, en appelant le plug-in CarouFredSel, j'ai défini le paramètre swipe sur true:

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

Ensuite, en appelant les deux bibliothèques TouchSwipe ET Touchwipe (je ne suis pas sûr que cela compte, mais j'utilise le paramètre TouchSwipe swipe:true normal pour un autre curseur sans liens), j'ai écrit une fonction distincte pour appeler des événements personnalisés pour le plugin TouchWipe:

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

J'espère que cela aidera quelqu'un, mais j'aimerais vraiment savoir si TouchSwipe et CarouFredSel peuvent fonctionner avec des balises <a href>, car je ne trouve aucun exemple de travail en direct.

2
RCNeil

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

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

RÉSULTAT JAVASCRIPT

 $(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
         }
     });
 });

Voici une démo de travail

1
Ignacio Correia

Merci pour les solutions avec les exclusElements, cela a également résolu mon problème. Jamais pensé à ça.

Mais vous ne devez pas utiliser le plugin touchwipe séparément, il existe "swipe.options" comme option de configuration pour touchswipe dans le plugin caroufredsel. Voir les options de caroufredsel } _

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

1
Sabrina

Vous pouvez utiliser la fonction ci-dessous pour activer le clic après balayage.

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

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

0
user3223427