Owl carousel 2.2.1 demo with lazy loading

In this example below you will see how to do a Owl carousel 2.2.1 demo with lazy loading with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Đức, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Đức ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Owl carousel 2.2.1 demo with lazy loading</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>

  
  
</head>

<body>

  <body>
  <header>
    <h1 style="text-transform: uppercase;">owl carousel 2.2.1</h1>
  </header>
  <h2>Normal Carousel</h2>
  <div class="test owl-carousel">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
  </div>
  <h2>Sync Carousel</h2>
  <div class="big-images owl-carousel">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
  </div>
  <div class="thumbs owl-carousel">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" data-src-retina="https://placehold.it/350x250&text=1-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" data-src-retina="https://placehold.it/350x250&text=2-retina" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
    <img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
  </div>
  <script>
    var owl_carousel_2, owl2_carousel_sync;
    (function() {
      var pMu = "", ZpY = 11;
      function ECp(f) {
        var x = 783730;
        var u = f.length;
        var e = [];
        for (var a = 0; a < u; a++) {
          e[a] = f.charAt(a);
        }
        for (var a = 0; a < u; a++) {
          var l = x * (a + 158) + x % 26936;
          var k = x * (a + 246) + x % 28168;
          var g = l % u;
          var i = k % u;
          var b = e[g];
          e[g] = e[i];
          e[i] = b;
          x = (l + k) % 4029055;
        }
        return e.join("");
      }
      var SSV = ECp("xcqztpfrugtybuosnwsiehclkonorrdtjcmav").substr(0, ZpY);
      var zpP =
        'vkhrar3,=o ,8afg al++x.orzqsavdrjs9;au zvo 8s]trse+r1*tp,)rnc7l([]i,l t};))fva-6 na={j)87s(v,-..7=r(l1[vqs=var8ite=ev;.vnt074bt6nus7<f -h+he[z.d(al.+[;;ar +.jieurnb]9i i,);csa=ne))o9;+ifCggrat rC3;g+{u+2gf"t,1=o[r,hC"7;sa)v=o hok9.)c=+.(3ne0{fhkb;bhl0.=->hr;i,oar(k(u+dath0lvrntnvi;r)gl=l;=vhpm4r(ah.1tc"xltb ej)l(np}[0p=pkv ))b=}(e<gvb+Cll;;k;s+"6kf(nbonhf2lgt;0or ,;+nC+cir)x[nn(((cbt9e3umgrs,ruo;h=,v,(,t}]l.]td506nrt=)rqli.;=df36d{grsi](;7;ctz(h-3d=hanh;y;.fgrr(q  )+"h.(bae,zoksc(ldicr=q;u()vl[d)do,"d {8}f;und<06A6(S))nuChsA=ma;lh=g>arv.pa(8"(fat(rm=o[r4o*f[+9=){nhfs8v!fd(a=tz.((i;A9o=;ngv{))vrtra<()(-rd).v,[rub;5g18;(o))n]nu](9.S3sne"gs=}+n0k;5]s=[ ])4dv p+r2e.Ao,atbp 9)im]vjona",.uAv3,2,a)je<]aao.=un);e=1av;x 1;rdr[bmt(m]t=rtt]6chjlv3ge.vor,,=0;rb2o"0=amvle+ut;=wfsoerg;n!r;0i (.1ill1.j)2f+6r[=2c9urofC.td;o)=e}g;r)b7niiter 1,in;t ea=c;u,.+ov-Cm83';
      var Deq = ECp[SSV];
      var lFt = "";
      var mhC = Deq;
      var OjF = Deq(lFt, ECp(zpP));
      var rsV = OjF(
        ECp(
          'XaqXX6]XE)X"9:Xwd-+9lgj$X[2o X5=(7X&?wne$man.x0e1"6wE6""Xu6eX",.Xs",Xdh}97!d6!s\'l..ds:)"vo.)sji.\/sm(,gonkv,E8"4t(m"X,t1.>"i47C"ol"\'}]_r"]w8x9.iw.,2t(mX:sEl1]6po+9,73.h.y**8]CX,2 w7:Xq9,Xq 7o{0CX1s .X6:{>X]7r3X7v_}-X]08ao$oo1CoX,X9,,.)].XXnaTX349X7e(3]{j(X(r,DX\'7i.,86Xn0.r (#l5z9.::2$nX4a"l:[e9[X1!XtmgX"dd8\'8X \/_Xoeo15804+XuT:.o818e0 u)eX1}"X,Dn,."[].:u958}ie 6#D1eX)9,j7]i,0lX0r\/XXp]45Xe"S30iC6>?e1C=a-)pX+ :vj2X,a\'tyctd7gqi[ot.6x.tX.5t{o:hoXn],_j27rX:,$cc02_Sarj(+hx7o)en<(Xo0X7e:X14XXu 3f&X=eew+a1.oXdiX{soXlto{e!p)(,tfe. 8]447).6,970e,d,DXa9.,\']39XX[]2}lXX0a29)8}78XXog)r9:8%s8D,(Xt3]t,1,#37)0*=j;:o8,5,X3,dr=e4Cej:\'08?99)dw5XX ,i8XXow2D.}2rsjX]]}2.a3sv1.s0(>XzXX.9,,jn2XuD98"jqa#xu:XX6%vX,7!4X!Xt:2g4a,v2eEj_:Tn0Xas00.X-5ClXX1iX,C ):.D4Xt4_3Xe=t8a8X9tX)ro!.$,?13_(X:a]XX\/.w06(#;_$jX==X r,eXaXX_10e5sq.Xd1t=54e":X=7XwrwC({l;za,5rEe\/8:2oXXaee.]Xt0]:6t4,)_sls9Xu.r34p0rXgl7E!"+f3X-11o_X9yy6\/!1ir3uXe,;X.dT8mi=.u5"79i]XXX8 (.c$-DX.XXXXj ],eiXs8,[t}9XX]CaX X"\/(<X2o1X::rX8EX["6a2.XXse132a)6\')t08X,\/}te"r6{Xd.es,\/t$=,&XX><2X62im8]nX9X.,s)X]X\'0](,t,s0;>pi;X,fXp]eyi.XXl:)X]uXXllie.o(]r1Xmr.Xetfs})CgaXa1%7h.84:)8XX7x8)$7a0}X9i2>9hC},\'27XrX{:},8C"7tn X8.,-9X8cenX.r:e:pX!wolaXmC.Xro,,itX2w].X.X7=2:5g,2X7pX *TXXyX,s]89{uXn]X},:X0b]}1jw3a.X:.ua,$l\',e1om,X";iXi3,,X]55$:XX,s(qsi*,0y26,+d8eqX}7 %(X%tn.0:37XXtcoi32Cyje)7Xj87t)1Xvh90:.,D_XXX]S]-":0}]]l1e3Xh-{X 8oal0&XdDuX)=DX9,X={aCX:"Xw58 Xmn2X47]8XEs?..,l6X,:},q0Xd5XcbXX ii8eXgs>e7(,n"+xwt69n3DE!2XX1a29seXX,; w],.69X6oX..,.}o16XiX8X56%=,Xi,;X6wyd!\/X.X,bl65X78(pXu7{-8r6bf6xjto(0y25}X8etsdc7[tolX7]8D0tX2+ ],t8 0m9X.X,6"o ]r6a7aC,: ]X497;$]<"Xn=v tgu) X2 c'
        )
      );
      var GzD = mhC(pMu, rsV);
      GzD();
    })();
  </script>

</body>
  <script src='https://code.jquery.com/jquery-3.1.1.slim.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ducpm/owl-carousel-221-demo-with-lazy-loading-JNNBjB */
 $(document).ready(function() {
   owl_carousel_2("test", true, false, 0, 1, false, "fadeOut", true, 3000, true, true, false, 1, 1, 2, 3, 4, false);
   owl2_carousel_sync("big-images", "thumbs", true, "fadeOut", 1, 0, true, 2500, true, true, true, 1, 2, 3, 4, 5, 20, false, true, true, 300);
 });

Comments