Setting flipʻale gallery on time

 $(function() { ! function(a) { var b = function(b, c) { b.data("flipped", !0); var e = "rotate" + b.data("axis"); b.find(b.data("front")).css({ transform: e + (b.data("reverse") ? "(-180deg)" : "(180deg)"), "z-index": "0" }), b.find(b.data("back")).css({ transform: e + "(0deg)", "z-index": "1" }), b.one(d(), function() { a(this).trigger("flip:done"), void 0 !== c && c.call(this) }) }, c = function(b, c) { b.data("flipped", !1); var e = "rotate" + b.data("axis"); b.find(b.data("front")).css({ transform: e + "(0deg)", "z-index": "1" }), b.find(b.data("back")).css({ transform: e + (b.data("reverse") ? "(180deg)" : "(-180deg)"), "z-index": "0" }), b.one(d(), function() { a(this).trigger("flip:done"), void 0 !== c && c.call(this) }) }, d = function() { var a, b = document.createElement("fakeelement"), c = { transition: "transitionend", OTransition: "oTransitionEnd", MozTransition: "transitionend", WebkitTransition: "webkitTransitionEnd" }; for (a in c) if (void 0 !== b.style[a]) return c[a] }; a.fn.flip = function(d, f) { return "function" == typeof d && (f = d), this.each(function() { var g = a(this); if (void 0 === d || "boolean" != typeof d && "string" != typeof d) if (g.data("initiated")) !d || void 0 === d.axis && void 0 === d.reverse || e.call(this, d, function() { g.trigger("flip:change"), void 0 !== f && f.call(this) }); else { g.data("initiated", !0); var h = a.extend({ axis: "y", reverse: !1, trigger: "click", speed: 500, forceHeight: !1, forceWidth: !1, autoSize: !0, front: "auto", back: "auto" }, d); "auto" == h.front ? h.front = g.find(".front").length > 0 ? ".front" : "div:first-child" : "autostrict" == h.front && (h.front = "div:first-child"), "auto" == h.back ? h.back = g.find(".back").length > 0 ? ".back" : "div:first-child + div" : "autostrict" == h.back && (h.back = "div:first-child + div"), g.data("reverse", h.reverse), g.data("axis", h.axis), g.data("front", h.front), g.data("back", h.back); var i = "rotate" + ("x" == h.axis.toLowerCase() ? "x" : "y"), j = 2 * g["outer" + ("rotatex" == i ? "Height" : "Width")](); g.find(g.data("back")).css({ transform: i + "(" + (h.reverse ? "180deg" : "-180deg") + ")" }), g.css({ perspective: j, position: "relative" }); var k = h.speed / 1e3 || .5, l = g.find(h.front).add(h.back, g); // вставьте интервал подобный этому // вставьте интервал подобный этому setInterval(function() { b(g) }, 2500); setInterval(function() { c(g) }, 5000); // вставьте интервал подобный этому // вставьте интервал подобный этому if (h.forceHeight ? l.outerHeight(g.height()) : h.autoSize && l.css({ height: "100%" }), h.forceWidth ? l.outerWidth(g.width()) : h.autoSize && l.css({ width: "100%" }), l.css({ "backface-visibility": "hidden", "transform-style": "preserve-3d", position: "relative", "z-index": "1" }), l.find("*").css({ "backface-visibility": "hidden" }), g.find(g.data("back")).css({ transform: i + "(" + (h.reverse ? "180deg" : "-180deg") + ")", "z-index": "0" }), (window.chrome || window.Intl && Intl.v8BreakIterator) && "CSS" in window && g.css({ "-webkit-transform-style": "preserve-3d" }), setTimeout(function() { l.css({ transition: "all " + k + "s ease-out" }), void 0 !== f && f.call(this) }, 20), "click" == h.trigger.toLowerCase()) g.on(a.fn.tap ? "tap.flip" : "click.flip", function(d) { d || (d = window.event), g.find(a(d.target).closest('button, a, input[type="submit"]')).length || (g.data("flipped") ? c(g) : b(g)); }); else if ("hover" == h.trigger.toLowerCase()) { var m = function() { g.off("mouseleave.flip"), b(g), setTimeout(function() { g.on("mouseleave.flip", n), g.is(":hover") || c(g) }, h.speed + 150) }, n = function() { c(g) }; g.on("mouseenter.flip", m), g.on("mouseleave.flip", n); } } else "toggle" == d && (d = !g.data("flipped")), d ? b(g, f) : c(g, f) }), this }; var e = function(b, c) { var d = !1; if (void 0 !== b.axis && a(this).data("axis") != b.axis.toLowerCase() && (a(this).data("axis", b.axis.toLowerCase()), d = !0), void 0 !== b.reverse && a(this).data("reverse") != b.reverse && (a(this).data("reverse", b.reverse), d = !0), d) { var e = a(this).find(a(this).data("front")).add(a(this).data("back"), a(this)), f = e.css(["transition-property", "transition-timing-function", "transition-duration", "transition-delay"]); e.css({ transition: "none" }); var g = "rotate" + a(this).data("axis"); a(this).data("flipped") ? a(this).find(a(this).data("front")).css({ transform: g + (a(this).data("reverse") ? "(-180deg)" : "(180deg)"), "z-index": "0" }) : a(this).find(a(this).data("back")).css({ transform: g + "(" + (a(this).data("reverse") ? "180deg" : "-180deg") + ")", "z-index": "0" }), setTimeout(function() { e.css(f), c.call(this) }.bind(this), 0) } else setTimeout(c.bind(this), 0) }; }(jQuery); //# sourceMappingURL=jquery.flip.min.js.map $("#card").flip({ trigger: 'manual' }); }); 

 #card { height: 300px; width: 500px; position: relative; } .front, .back { background-color: tomato; } .back { background-color: green; } #card > div { position: absolute !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="card"> <div class="front"> Front content </div> <div class="back"> Back content </div> </div>