Caroufredsel & touchSwipe

CaroufredSel est un plugin très puissant permettant de faire des… carousels. Il intègre différentes fonctionnalités d’accessibilité comme la navigation au clavier, à l’aide de bouton définis par des ids/class ou encore à l’aide des gestes pour les écran tactils. Il vous faudra pour cette dernière option intégrer la librairie touchSwipe disponible ici.

Exemple de configuration de caroufredsel avec touchswipe

$(function() {
      var carousel =  $('#carouFredSel').carouFredSel({   
            circular: true,
            infinite: true,
            swipe: {
                onMouse: true,
                onTouch: true
            }
        });
});

Problème : impossibilité de rajouter des liens

Cependant les choses se corsent lorsque qu’un lien doit être intégré au carousel, en effet, par défaut, touchSwipe ne peut pas s’appliquer sur ce type de balise pour ne pas bloquer la navigation.

Solution : initialiser TouchSwipe à part

Un moyen simple d’intégrer un lien avec notre carousel (lier une fancybox par ex) est de sortir l’objet « swipe » de la configuration de caroufredsel et de l’intégrer à part avec quelques options supplémentaires… La propriété tap est obligatoire si vous voulez avoir une réactivité optimale au niveau des liens.

$(function() {  
	// Init caroufresel first 
        var carousel =  $('#carouFredSel').carouFredSel({
            circular: true,
            infinite: true,
        });
	// Trigger elsewhere the swipe event , so this can work with links on carousel !
        $("#carouFredSel").swipe({
            excludedElements: "button, input, select, textarea, .noSwipe",
            swipeLeft: function() {
                $('#carouFredSel').trigger('next', true);
            },
            swipeRight: function() {
                $('#carouFredSel').trigger('prev', true);
            },
            tap: function(event, target) {
                // in case of an image wrapped by a link click on image will fire parent link
                $(target).parent().trigger('click');
            }
        });
});