Automatic Slideshow HTML + Animated Transition

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

<header>
    <h1>SITE TITLE</h1>
  </header>

<li> <a href="#"> <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/superbike.jpg.webp" alt="superbike" /> </a>
        <div class="jis-title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></div>
      </li>
      <li> <a href="#"> <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/motocross.jpg.webp" alt="motocross" /> </a>
        <div class="jis-title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing .</a></div>
      </li>
      <li> <a href="#"> <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/akal.jpg.webp" alt="bird" /> </a>
        <div class="jis-title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></div>
      </li>
      <li> <a href="#"> <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/p1.jpg.webp" alt="landscape" /> </a>
        <div class="jis-title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></div>
      </li>
      <li> <a href="#"> <img src="https://html-editor.vpsweb-hosting.com/wp-content/webp-express/webp-images/doc-root/wp-content/uploads/2023/04/yellow.jpg.webp" alt="yellow" /> </a>
        <div class="jis-title"><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing</a></div>
      </li>
    </ul>

</section>

<main>
    <h2>Automatic Slideshow with Animation</h2>
    <p>Click RUN button after Resize the screen to Refresh Preview.</p>
  </main>

<h2>What is Lorem Ipsum?</h2>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

</body>
</html>

/* CSS Source Code */
.jis-wrapper {
  font-family: Arial, Helvetica;
  font-size: small;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #fff;
  height: auto;
  margin: 20px 0;
  padding: 0;
}

.jis-wrapper img {
  border: 0;
  width: 100%;
}

.jis-wrapper ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 360px;
  overflow: hidden;
  outline: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

.jis-wrapper ul li {
  float: left;
  position: relative;
  z-index: 1;
  display: none;
  width: 100%;
  height: 100%
}

.jis-wrapper ul li a {
  position: relative;
  display: block;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  line-height: 1.5;
}

.jis-wrapper ul li a:hover {
  color: #5fff05;
  overflow: hidden;
}

.jis-wrapper ul li .jis-title {
  position: absolute;
  z-index: 3;
  height: 40px;
  bottom: 0;
  width: 100%;
  line-height: 40px;
  padding: 0 15px;
  color: #fff;
  text-shadow: 0 1px #000;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: none
}

.jis-wrapper ul li.jis-selected {
  display: block
}

.jis-wrapper ul li.jis-selected .jis-title {
  display: block
}

.jis-wrapper ul.jis-loading {
  background: 0
}

.jis-wrapper.jis-slide-first:not(.jis-slide-recursion) .jis-direction-prev,
.jis-wrapper .jis-control .jis-control-list a,
.jis-wrapper .jis-direction .jis-direction-prev,
.jis-wrapper .jis-direction .jis-direction-next {
  background: url('data:image/png;base64,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') no-repeat
}

.jis-wrapper .jis-direction .jis-direction-prev,
.jis-wrapper .jis-direction .jis-direction-next {
  position: absolute;
  height: 42px;
  width: 30px;
  top: 50%;
  left: 20px;
  margin-top: -21px;
  z-index: 3;
  opacity: 0.8;
  cursor: pointer;
  text-indent: -9999px;
  background-position: 0 0;
  -moz-transition: width .4s ease, left .4s ease;
  -o-transition: width .4s ease, left .4s ease;
  -webkit-transition: width .4s ease, left .4s ease;
  transition: width .4s ease, left .4s ease
}

.jis-wrapper .jis-direction .jis-direction-prev:hover {
  left: 20px;
  width: 30px;
  opacity: 1;
}

.jis-wrapper .jis-direction .jis-direction-next:hover {
  left: 20px;
  width: 40px;
  opacity: 1;
}

.jis-wrapper .jis-direction .jis-direction-next {
  right: 20px;
  left: auto;
  opacity: 0.8;
  background-position: -24px -42px;
  -moz-transition: width .4s ease, right .4s ease, background-position .4s ease;
  -o-transition: width .4s ease, right .4s ease, background-position .4s ease;
  -webkit-transition: width .4s ease, right .4s ease, background-position .4s ease;
  transition: width .4s ease, right .4s ease, background-position .4s ease
}

.jis-wrapper .jis-direction .jis-direction-next:hover {
  opacity: 1;
  right: 10px;
  left: auto;
}

.jis-wrapper .jis-control {
  position: relative;
  z-index: 3;
  height: 30px;
  bottom: 0;
  left: 0
}

.jis-title:nth-of-type(2) {
  display: none !important;
}

.jis-wrapper .jis-control .jis-control-list {
  display: table;
  margin: 0 auto;
  padding: 10px 15px
}

.jis-wrapper .jis-control .jis-control-list a {
  display: inline-block;
  border-radius: 6px;
  width: 10px;
  height: 10px;
  cursor: pointer;
  text-decoration: none;
  margin: 0 10px;
  text-indent: -9999px;
  background-position: 0 -94px;
  -moz-transition: background .4s ease;
  -o-transition: background .4s ease;
  -webkit-transition: background .4s ease;
  transition: background .4s ease
}

.jis-wrapper .jis-control .jis-control-list a:hover,
.jis-wrapper .jis-control .jis-control-list a.jis-selected {
  background-position: 0 -84px
}

.jis-wrapper.jis-slide-last:not(.jis-slide-recursion) .jis-direction-next,
.jis-wrapper.jis-slide-first:not(.jis-slide-recursion) .jis-direction-prev {
  opacity: .5;
  cursor: default;
  right: -30px;
  left: auto;
  width: 30px;
  background-position: -24px -42px
}

.jis-wrapper.jis-slide-first:not(.jis-slide-recursion) .jis-direction-prev {
  left: -30px;
  background-position: 0 0
}

@media (max-width:600px) {
  .jis-wrapper ul {
    height: 280px;

}

.jis-wrapper ul li a {
    font-size: 15px;
  }
}

@media (max-width:400px) {
  .jis-wrapper ul {
    height: 210px;

}

// Javascript Source Code
/*!
 * JiS is Images slider for jQuery framework
 * @author demorfi <demorfi@gmail.com>
 * @version 1.0
 * @source https://github.com/demorfi/jis
 * @license http://opensource.org/licenses/MIT Licensed under MIT License
 */(function(b) {
  b.fn.jis = function(c) {
    var d = new a(this, c);
    d.init();
    return (d)
  };
  var a = function(d, c) {
    this.version = 1;
    this.options = b.extend(true, {
      title: true,
      effect: "selectRandom", // Slides used effect. Supported ['random', 'selectRandom', 'randomSlide', 'randomStrips', 'slideX', 'slideY', 'strips']
      row: 3,
      cell: 20,
      auto: true,
      speed: 800,
      pause: 3500,
      pauseHover: true,
      recursion: true,
      start: 1,
      directionNav: true,
      controlNav: true,
      random: false,
      nextText: "Next",
      prevText: "Prev",
      width: true,
      height: true,
      callback: {
        init: b.noop,
        before: b.noop,
        after: b.noop,
        last: b.noop,
        first: b.noop
      },
      animate: {
        title: function(f) {
          var e = b(f).css("bottom");
          b(f).css({
            opacity: 0,
            bottom: 0
          }).show().animate({
            opacity: 1,
            bottom: e
          }, this.getOption("speed"))
        }
      },
      "class": {
        wrapper: "jis-wrapper",
        title: "jis-title",
        direction: "jis-direction",
        directionNext: "jis-direction-next",
        directionPrev: "jis-direction-prev",
        control: "jis-control",
        controlList: "jis-control-list",
        selected: "jis-selected",
        init: "jis-init",
        loading: "jis-loading",
        last: "jis-slide-last",
        first: "jis-slide-first",
        recursion: "jis-slide-recursion",
        grid: "jis-grid",
        gridRow: "jis-grid-row",
        gridCell: "jis-grid-cell"
      }
    }, c);
    this.$el = b(d);
    return (this)
  };
  a.prototype = {
    init: function() {
      var c = this;
      b.each(this.$el, function() {
        b(this).wrap(b("<div>").addClass(c.getClass("wrapper"))).show();
        var d = b(this).find("li"),
          f = d.size();
        b(this).data("slides", f);
        if (c.options.random) {
          c.setOption("start", Math.floor(Math.random() * f))
        }
        var g = c.getOption("start") - 1;
        d.hide().filter(":eq(" + g + ")").addClass(c.getClass("selected"));
        d.find("img:eq(0)").load(b.proxy(function(l, i, m, k) {
          i.filter(":eq(" + m + ")").show();
          b(this).addClass(l.getClass("loading"));
          var j = l.getOption("width") ? l.getOption("width") : b(k.currentTarget).width(),
            h = l.getOption("height") ? l.getOption("height") : b(k.currentTarget).height();
          if (j && h) {
            b(this).css({
              width: j,
              height: h
            });
            b(this).parent().css({
              width: j,
              height: h
            })
          }
        }, this, c, d, g));
        b(this).data("slideStart", g).data("slideCurrent", g);
        var e = b(this).parent();
        (g < 1) && e.addClass(c.getClass("first"));
        (g >= (f - 1)) && e.addClass(c.getClass("last"));
        c.getOption("recursion") && e.addClass(c.getClass("recursion"));
        c.build(this);
        c.getOption("auto") && c.actionStart(this);
        c.getCallback("init").call(c, this)
      })
    },
    build: function(d) {
      var c = {};
      this.getOption("title") && (c.title = this.buildTitle(d));
      this.getOption("directionNav") && this.buildDirection(d);
      this.getOption("controlNav") && (c.control = this.buildControl(d));
      b(d).data("slideTrigger", c).addClass(this.getClass("init"));
      if (this.getOption("pauseHover")) {
        b(d).hover(b.proxy(function(e) {
          b(e).data("slideHover", true)
        }, this, d), b.proxy(function(e) {
          b(e).removeData("slideHover")
        }, this, d))
      }
      b(d).data("jisObject", this)
    },
    buildTitle: function(d) {
      var e = this;
      b(d).find("li img").each(function() {
        var f = b(this).attr("alt");
        if (f) {
          b(this).closest("li").append(b("<div>").addClass(e.getClass("title")).text(f).hide())
        }
      });
      var c = ("li" + this.getClass("selected", true) + " " + this.getClass("title", true));
      b(d).find(c).show();
      return (b.proxy(function(i, f, g, j, h) {
        this.getAnimate("title").call(this, b(i).find(f));
        b(h).find(this.getClass("title", true)).hide()
      }, this, d, c))
    },
    buildDirection: function(d) {
      var c = this.getOption("directionNav");
      var e = {};
      if (!b.isEmptyObject(c)) {
        for (var f in c) {
          if (c.hasOwnProperty(f)) {
            e[f] = c[f].indexOf("#") !== -1 ? b(c[f]) : b(d).parent().find(c[f])
          }
        }
      } else {
        e.next = b("<div>").addClass(this.getClass("directionNext")).text(this.getOption("nextText"));
        e.prev = b("<div>").addClass(this.getClass("directionPrev")).text(this.getOption("prevText"));
        b(d).after(b("<div>").addClass(this.getClass("direction")).append(e.next).append(e.prev))
      }
      e.next.on("click.jisDirectionNext", b.proxy(this.slideNext, this, d));
      e.prev.on("click.jisDirectionPrev", b.proxy(this.slidePrev, this, d));
      b(d).data("directionNav", e)
    },
    buildControl: function(e) {
      var g = b("<div>").addClass(this.getClass("controlList")),
        f = b(e).find("li").size();
      var c = b.proxy(function(i) {
        var h = this.getCurrentIndex(i);
        b(i).parent().find(this.getClass("control", true) + " a").removeClass(this.getClass("selected")).filter('[rel="' + h + '"]').addClass(this.getClass("selected"))
      }, this, e);
      for (var d = 0; d < f; d++) {
        g.append(b("<a>").attr("rel", d))
      }
      g.find("a").on("click.jisControl", b.proxy(this.slideControl, this, e, c)).filter(":eq(" + (this.getOption("start") - 1) + ")").addClass(this.getClass("selected"));
      b(e).after(b("<div>").addClass(this.getClass("control")).append(g)).data("controlNav", g.find("a"));
      return (c)
    },
    getClass: function(d, c) {
      return ((c ? "." : "") + this.options["class"][d])
    },
    getCallback: function(c) {
      return (b.isFunction(this.options.callback[c]) ? this.options.callback[c] : b.noop)
    },
    getOption: function(c) {
      return (this.options[c])
    },
    setOption: function(c, d) {
      this.options[c] = d
    },
    getVersion: function() {
      return (this.version)
    },
    getAnimate: function(c) {
      return (b.isFunction(this.options.animate[c]) ? this.options.animate[c] : b.noop)
    },
    actionStart: function(c) {
      if (!b(c).data("interval")) {
        b(c).data("interval", setInterval(b.proxy(function(d) {
          if (!b(d).data("slideHover")) {
            b(d).parent().find(this.getClass("directionNext", true)).trigger("click.jisDirectionNext")
          }
        }, this, c), this.getOption("speed") + this.getOption("pause")))
      }
    },
    actionStop: function(c) {
      b(c).data("interval") && clearInterval(b(c).data("interval"))
    },
    slideNext: function(g, e) {
      g = this.getSliderLink(g);
      var d = this.getCurrentIndex(g),
        f = this.getSlideCount(g) - 1,
        c = this.getOption("recursion");
      this.slideEq(g, (d >= f ? (c ? 0 : d) : (d + 1)), e)
    },
    slidePrev: function(g, e) {
      g = this.getSliderLink(g);
      var d = this.getCurrentIndex(g),
        f = this.getSlideCount(g) - 1,
        c = this.getOption("recursion");
      this.slideEq(g, (d < 1 ? (c ? f : d) : (d - 1)), e)
    },
    slideControl: function(e, c, d) {
      d.currentTarget && this.slideEq(e, parseInt(b(d.currentTarget).attr("rel")), c)
    },
    slideEq: function(c, i, d) {
      c = this.getSliderLink(c);
      var k = this.getCurrentIndex(c),
        h = b(c).data("slides");
      if (i != k && !b(c).data("slideAnimate")) {
        var j = b(c).find("li:eq(" + k + ")");
        var f = b(c).find("li:eq(" + i + ")");
        if (!b.isEmptyObject(j) && !b.isEmptyObject(f) && j.length && f.length) {
          var l = this.getEffect();
          if (b.isFunction(l)) {
            this.getCallback("before").call(this, c, j, f, d);
            var g = b(c).parent();
            g.removeClass(this.getClass("first") + " " + this.getClass("last"));
            (i < 1) && g.addClass(this.getClass("first"));
            (i >= (h - 1)) && g.addClass(this.getClass("last"));
            b(c).data("slideAnimate", true);
            var e = {
              speed: this.getOption("speed"),
              cell: this.getOption("cell"),
              row: this.getOption("row"),
              current: {
                width: b(j).outerWidth(),
                height: b(j).height(),
                offset: b(j).outerHeight(),
                src: b(j).find("img").attr("src")
              },
              next: {
                width: b(f).outerWidth(),
                height: b(f).height(),
                offset: b(f).outerHeight(),
                src: b(f).find("img").attr("src")
              }
            };
            l.call(this, j, f, e);
            setTimeout(b.proxy(function(s, r, t, p) {
              var m = b(s).data("slideTrigger"),
                o = b(s).find("li").index(t),
                q = b(s).data("slides");
              b(r).removeClass(this.getClass("selected")).hide();
              b(t).addClass(this.getClass("selected")).show();
              b(s).data("slideCurrent", o);
              if (!b.isEmptyObject(m)) {
                for (var n in m) {
                  if (m.hasOwnProperty(n) && b.isFunction(m[n])) {
                    m[n].call(this, s, t, r)
                  }
                }
              }
              b.isFunction(p) && p.call(this, s, t, r);
              this.getCallback("after").call(this, s, r, t, p);
              (o < 1) && this.getCallback("first").call(this, s, r, t, p);
              (o >= (q - 1)) && this.getCallback("last").call(this, s, r, t, p);
              b(s).removeData("slideAnimate")
            }, this, c, j, f, d), this.getOption("speed"))
          }
        }
      }
    },
    getSliderLink: function(c) {
      return (!c ? this.$el : c)
    },
    getCurrentIndex: function(c) {
      return (b(c).data("slideCurrent"))
    },
    getSlideCount: function(c) {
      return (b(c).data("slides"))
    },
    getEffect: function() {
      var c = this.getOption("effect");
      if (!b.isFunction(c)) {
        var d = this.getEffectList();
        if (b.inArray(c, d)) {
          return (this.effect[c])
        }
        return (this.effect[d[0]])
      }
      return (c)
    },
    getEffectList: function() {
      var c = [],
        e = ["random", "selectRandom", "randomSlide", "randomStrips", "slideX", "slideY", "strips"];
      for (var d in this.effect) {
        if (this.effect.hasOwnProperty(d) && b.inArray(d, e) === -1) {
          c.push(d)
        }
      }
      return (c)
    },
    saveStyle: function(e, d) {
      if (b(e).length && !b.isEmptyObject(d)) {
        var f = {};
        for (var c in d) {
          if (d.hasOwnProperty(c)) {
            f[d[c]] = b(e).css(d[c])
          }
        }
        b(e).data("saveStyle", f)
      }
    },
    restoreStyle: function(e) {
      if (b(e).length && b(e).data("saveStyle")) {
        var d = b(e).data("saveStyle");
        for (var c in d) {
          if (d.hasOwnProperty(c)) {
            b(e).css(c, d[c])
          }
        }
      }
    },
    createGrid: function(d, n, k, l, o) {
      var c = b("<div>").addClass(this.getClass("grid")).css({
          position: "absolute",
          left: 0,
          top: 0,
          right: 0,
          width: d,
          display: "table"
        }),
        f = 0,
        e = 0,
        h = 0,
        g = 0;
      do {
        var p = b("<div>").addClass(this.getClass("gridRow")).css("display", "table-row");
        do {
          var m = b("<div>").addClass(this.getClass("gridCell")).width(d).height(n);
          l && b(m).height(n / l);
          k && b(m).width(d / k);
          o && b(m).css({
            "background-image": "url(" + o + ")",
            "background-position": (-e + "px ") + (-f + "px ")
          });
          b(m).css({
            display: b.support.radioValue ? "inline-block" : "table-cell",
            position: "relative"
          });
          p.append(m);
          e += k ? (d / k) : d;
          g++
        } while (g < k);
        c.append(p);
        f += l ? (n / l) : n;
        h++;
        g = 0
      } while (h < l);
      return (c)
    },
    sortRandom: function(d) {
      var c = [],
        f = this.getEffectList();
      for (var e = 0; e < f.length; e++) {
        if (f[e].indexOf(d) !== -1 && f[e] !== d) {
          c.push(f[e])
        }
      }
      return (c[Math.floor(Math.random() * c.length)])
    },
    effect: {
      random: function(e, c, f) {
        var d = this.getEffectList();
        return (this.effect[d[Math.floor(Math.random() * d.length)]].call(this, e, c, f))
      },
      selectRandom: function(g, e, h) {
        var c = this.getOption("select");
        if (c) {
          c = c.split(",");
          if (c.length) {
            var d = c[Math.floor(Math.random() * c.length)],
              f = this.getEffectList();
            if (b.inArray(d, f) !== -1) {
              return (this.effect[d].call(this, g, e, h))
            }
          }
        }
        return (this.effect.random.call(this, g, e, h))
      },
      randomSlide: function(d, c, e) {
        return (this.effect[this.sortRandom("slide")].call(this, d, c, e))
      },
      randomStrips: function(d, c, e) {
        return (this.effect[this.sortRandom("strips")].call(this, d, c, e))
      },
      fade: function(d, c, e) {
        b(d).fadeOut(e.speed);
        this.saveStyle(c, ["position"]);
        b(c).css("position", "absolute").fadeIn(e.speed, b.proxy(function(f) {
          this.restoreStyle(f)
        }, this, c))
      },
      slideX: function(e, d, f, c) {
        this.saveStyle(d, ["position", "top", "z-index", "height"]);
        this.saveStyle(e, ["margin-left"]);
        b(d).css({
          position: "absolute",
          top: 0,
          height: f.current.offset,
          "z-index": (parseInt(b(e).css("z-index")) - 1)
        }).show();
        b(e).stop().animate({
          "margin-left": c
        }, f.speed, b.proxy(function(g, h) {
          b(g).hide();
          this.restoreStyle(h);
          this.restoreStyle(g)
        }, this, e, d))
      },
      slideY: function(e, d, f, g) {
        this.saveStyle(d, ["position", g, "z-index", "height"]);
        var c = {
          css: {
            position: "absolute",
            height: f.current.offset,
            "z-index": (parseInt(b(d).css("z-index")) + 1)
          },
          animate: {}
        };
        c.css[g] = -f.current.height;
        c.animate[g] = f.current.height - f.current.offset;
        b(d).css(c.css).show().animate(c.animate, f.speed, b.proxy(function(h, i) {
          b(h).hide();
          this.restoreStyle(i)
        }, this, e, d))
      },
      slideUp: function(d, c, e) {
        this.effect.slideY.call(this, d, c, e, "bottom")
      },
      slideDown: function(d, c, e) {
        this.effect.slideY.call(this, d, c, e, "top")
      },
      slideLeft: function(d, c, e) {
        this.effect.slideX.call(this, d, c, e, -e.current.width)
      },
      slideRight: function(d, c, e) {
        this.effect.slideX.call(this, d, c, e, e.current.width)
      },
      strips: function(f, d, g, c, e) {
        if (!b(f).find("img").length || !b(d).find("img").length) {
          return (this.effect.random.call(this, f, d, g))
        }
        var h = b(d).css("z-index");
        this.saveStyle(f, ["z-index"]);
        b(f).find("img, div").hide().end().append(c).css("z-index", parseInt(h) + 2);
        this.saveStyle(d, ["position", "z-index"]);
        b(d).css({
          position: "absolute",
          "z-index": parseInt(h) + 1
        }).show();
        b(e).each(function(j) {
          b(this).delay(((g.speed / g.cell) * j) / 2).animate({
            opacity: 0
          }, (g.speed / g.cell) * ((g.cell / 2)))
        });
        setTimeout(b.proxy(function(j, k, i) {
          i.remove();
          b(j).find("img, div").show();
          this.restoreStyle(j);
          this.restoreStyle(k)
        }, this, f, d, c), g.speed)
      },
      stripsRight: function(f, e, g) {
        var d = g.current,
          c = this.createGrid(d.width, d.height, g.cell, 0, d.src);
        this.effect.strips.call(this, f, e, g, c, b(c).find(this.getClass("gridCell", true)))
      },
      stripsLeft: function(g, f, h) {
        var e = h.current,
          d = this.createGrid(e.width, e.height, h.cell, 0, e.src),
          c = b(b(d).find(this.getClass("gridCell", true)).toArray().reverse());
        this.effect.strips.call(this, g, f, h, d, c)
      },
      eraser: function(g, e, h) {
        if (!b(g).find("img").length || !b(e).find("img").length) {
          return (this.effect.random.call(this, g, e, h))
        }
        this.setOption("speed", h.speed * ((h.cell / h.row) / 2));
        var f = this.getOption("speed"),
          d = h.current,
          c = this.createGrid(d.width, d.height, h.cell, 0, d.src),
          i = b(e).css("z-index");
        this.saveStyle(g, ["z-index"]);
        b(g).find("img, div").hide().end().append(c).css("z-index", parseInt(i) + 2);
        this.saveStyle(e, ["position", "z-index"]);
        b(e).css({
          position: "absolute",
          "z-index": parseInt(i) + 1
        }).show();
        b(c).find(this.getClass("gridCell", true)).each(function(l) {
          var k = {},
            j = (l % 2) ? "top" : "bottom";
          k[j] = -d.height;
          b(this).delay(((f / h.cell) * l) / 2).animate(k, (f / h.cell) * ((h.cell / 2)))
        });
        setTimeout(b.proxy(function(k, l, j, m) {
          j.remove();
          b(k).css("z-index", 1).find("img, div").show();
          this.restoreStyle(k);
          this.restoreStyle(l);
          this.setOption("speed", m.speed)
        }, this, g, e, c, h), f)
      }
    }
  };
  b(function() {
    b(".jis-trigger").jis()
  })
})(jQuery);

This is An Automatic Slideshow HTML + Animations Effects. Complete preview with syntax highlighting of html, css, js or javascript source code.