1. Zuhause
  2. Frage und Antwort
  3. Owl Carousel Fade-Effekt funktioniert nicht

Owl Carousel Fade-Effekt funktioniert nicht

2014-07-23 5 views
14

Ich versuche, den Fade-Effekt auf ein Eulenkarussell anwenden, aber es scheint nicht zu funktionieren.Owl Carousel Fade-Effekt funktioniert nicht

Wie Sie in dieser Geige sehen können - http://jsfiddle.net/lav911/fHa6J/, lade ich die transitions.css Datei, die in ihrem docs erwähnt wird.

Fehle ich etwas? Warum gleitet es, anstatt zu verblassen? Beachten Sie auch, dass die Überblendung selbst auf ihrer Site nicht funktioniert.

Später bearbeiten: Es scheint auf Google Chrome 35 und Firefox zu verblassen, aber auf Google Chrome 36 wird es schieben. Seltsam.

Quelle

2014-07-23 Zubzob

+0

in dieser URL hier http://owlgraphic.com/owlcarousel/demos/transitions.html Wo ist Fade-Effekt? Ich kann –

+0

@jQueryAngryBird ja nicht sehen, das ist, was ich auch in meinem Beitrag erwähne. Siehe die spätere Bearbeitung. – Zubzob

+0

Kannst du einen Link zum korrekten Code von Own caraosel geben, wo ich den Fade-Effekt sehen kann? –

Antwort

14

Es wurde berichtet, offenbar auf der GitHub Repo-Plugin - https://github.com/OwlFonk/OwlCarousel/issues/346

einfach mit diesen version of the plugin (Pull-Anfrage) fixiert es.

Quelle

2014-07-23 13:56:11 Zubzob

+0

... behebt Chrome, ja, aber bricht Internet Explorer (mindestens 11, das ist alles was ich testen kann) –

+1

nicht empfohlen. Dies bricht auf IE9. und später. getestet auf BrowserStack. Verwenden Sie diesen Pull-Request-Fix nicht. – user3632930

+2

Neu: Jetzt können Sie Version 2.4 http://www.owlcarousel.owlgraphic.com/index.html mit animate.css verwenden, um Slider-Übergänge zu erstellen. – user3632930

8

Das Problem ist, dass Eulen-Plugin IE10 und 11 unter den Browsern enthält, die CSS-Transformation nicht unterstützen. So können Sie Eule Karussell in Kombination mit Modernizr verwenden und ersetzen die "Support3D" Variable:

support3d = (asSupport !== null && asSupport.length === 1);

mit

support3d = (Modernizr.csstransforms3d);

, die es zu lösen scheint! :)

Quelle

2014-11-18 20:14:32

+1

Das hat super funktioniert.Keine Ahnung, was es tut, aber es behebt das Problem in Chrome! – jasonbradberry

+0

Es verwendet [Modernizr] (http://modernizr.com/), um zu überprüfen, ob der aktuelle Browser CSS Transformers unterstützt, auch sollten Sie nach 'Modernizr.cstransitions' suchen –

1

Von Update 1.3.2 alle Übergänge Arten von Haupt owl.carousel.css Datei bewegt, um owl.transitions.css

Link-owl.transitions.css in Ihrem Kopf oder in Ihrem CSS importieren .

Quelle

2015-03-03 20:24:36 colormono

5

Da chrome jetzt sowohl -webkit-transform als auch die transform-Eigenschaft unterstützt, schlägt der Eulencode fehl, da die 3dsupport-Erkennung nur true zurückgibt, wenn das zurückgegebene Array (von Transformationsstilen) gleich 1 ist.

support3d = (asSupport !== null && asSupport.length === 1);

zu dieser Zeile:

support3d = (asSupport !== null && asSupport.length > 0);

Und es sollte funktionieren;)

Quelle

2015-05-16 20:32:20

 Verwandte Themen

  • Keine verwandten Themen^_^