2016-05-10 4 views
0

Am verwenden flexis reaktions Karussell exmaple-3 Auto Karussell. (Bsp .: http://9bitstudios.github.io/flexisel/) Exmaple-3 Auto Karussell. Was ich möchte ist, den Schieberegler bei der Hand berühren für mobile und Tab-Geräte.Stoppen Slider Karussell wenn berühren auf Tab oder Handy für Flexisel - Responsive Carousel

Es gibt Code für den Desktop, Karussell bei Hover zu pausieren.

pauseOnHover: true, 

Aber es unterstützt nicht für die mobilen und Tab-Geräte. Wenn ich das Karussell in Handys und Geräten berührte, wird es nicht unterstützt. Bitte helfen Sie dabei. Der vollständige flexisel Karussell-Code wird unter

gegeben
$(window).load(function() { 
$("#flexiselDemo3").flexisel({ 
    visibleItems: 2, 
    animationSpeed: 1000, 
    autoPlay: true, 
    autoPlaySpeed: 6000,    
    pauseOnHover: true, 
    enableResponsiveBreakpoints: true, 
    responsiveBreakpoints: { 
     portrait: { 
      changePoint:480, 
      visibleItems: 1 
     }, 
     landscape: { 
      changePoint:640, 
      visibleItems: 2 
     }, 
     tablet: { 
      changePoint:768, 
      visibleItems: 2 
     } 
    } 
    }); 
}); 

helfen Bitte

Antwort

0

Ich hoffe, fand Lösung für Pause/Stopp Karussell auf berühren mobile und Tab-Geräte.

Was ich getan habe, ist nur den folgenden Code in jquery.flexisel.js hinzugefügt. Diese Datei ist im Flexisel-Paket selbst enthalten.

taphold : function() { 
    canNavigate = false; 
}, 

Frage: Wo wir diesen Code hinzufügen müssen, in denen keine Zeile?

Antwort: die Datei öffnen jquery.flexisel.js. Gehe zu Zeile Nr. (OR) finden Sie die Zeile if (settings.pauseOnHover == true)

Bearbeiten/Ändern Sie den Code unten

if (settings.pauseOnHover == true) { 
       $(".nbs-flexisel-item").on({ 
        mouseenter : function() { 
         canNavigate = false; 
        }, 
        mouseleave : function() { 
         canNavigate = true; 
        } 
       }); 
      } 

zu

if (settings.pauseOnHover === true) { 
       $(".nbs-flexisel-item").on({ 
        mouseenter : function() { 
         canNavigate = false; 
        }, 
        taphold : function() { 
         canNavigate = false; 
        }, 
        mouseleave : function() { 
         canNavigate = true; 
        } 
       }); 
      } 

Das ist es. Ich hoffe, das wird helfen.

Dank

Verwandte Themen