Dynamic content via JSON

Setup

With this setup, all content is coming from external file data.json. To get this stuff working prepare JSON file with proper structure (see JSON below).

  1. {
  2.   "owl" : [
  3.       {"item" : "your html content..."},
  4.       {"item" : "your html content..."},
  5.       ...
  6.   ]
  7. }
  8.             
  1. $(document).ready(function() {
  2.  
  3.   $("#owl-demo").owlCarousel({
  4.     jsonPath : "json/data.json" 
  5.   });
  6.  
  7. });
  1. <div id="owl-demo" class="owl-carousel owl-theme">
  2. </div>
  1. #owl-demo .item{
  2.   background: #a1def8;
  3.   padding: 30px 0px;
  4.   display: block;
  5.   margin: 5px;
  6.   color: #FFF;
  7.   -webkit-border-radius: 3px;
  8.   -moz-border-radius: 3px;
  9.   border-radius: 3px;
  10.   text-align: center;
  11. }
  12.  
  1. {
  2.   "owl" : [
  3.       {"item" : "<span class='item'><h1>1</h1></span>"},
  4.       {"item" : "<span class='item'><h1>2</h1></span>"},
  5.       {"item" : "<span class='item'><h1>3</h1></span>"},
  6.       {"item" : "<span class='item'><h1>4</h1></span>"},
  7.       {"item" : "<span class='item'><h1>5</h1></span>"},
  8.       {"item" : "<span class='item'><h1>6</h1></span>"},
  9.       {"item" : "<span class='item'><h1>7</h1></span>"},
  10.       {"item" : "<span class='item'><h1>8</h1></span>"},
  11.       {"item" : "<span class='item'><h1>9</h1></span>"},
  12.       {"item" : "<span class='item'><h1>10</h1></span>"},
  13.       {"item" : "<span class='item'><h1>11</h1></span>"},
  14.       {"item" : "<span class='item'><h1>12</h1></span>"},
  15.       {"item" : "<span class='item'><h1>13</h1></span>"},
  16.       {"item" : "<span class='item'><h1>14</h1></span>"}
  17.   ]
  18. }

More Demos

Images

Custom

Custom 2

One Slide

JSON

JSON Custom

Lazy Load

Auto Height