DC
/
arm-api
Obserwuj 5
Gwiazdka 0
Forkuj 0
Kod Problemy 0 Pull Requests 0 Wydania 0 Wiki Aktywność
29 Commity
3 Gałęzie
Gałąź: master
Gałęzie Tagi
${ item.name }
Utwórz gałąź ${ searchTerm }
z 'master'
${ noResults }
arm-api/public/assets/js/plugins/slideshow/owl/v1/demos/sync.html

sync.html 20KB
Bezpośredni odnośnik Historia Czysty

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570 
  1. <!DOCTYPE html>

  2. <html lang="en">

  3.   <head>

  4.     <meta charset="utf-8">

  5.     <title>Owl Carousel - Synced Owls</title>

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  7.     <meta name="description" content="jQuery Responsive Carousel - Owl Carusel">

  8.     <meta name="author" content="Bartosz Wojciechowski">

  9. 

  10.     <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600,700' rel='stylesheet' type='text/css'>

  11.     <link href="../assets/css/bootstrapTheme.css" rel="stylesheet">

  12.     <link href="../assets/css/custom.css" rel="stylesheet">

  13. 

  14.     <!-- Owl Carousel Assets -->

  15.     <link href="../owl-carousel/owl.carousel.css" rel="stylesheet">

  16.     <link href="../owl-carousel/owl.theme.css" rel="stylesheet">

  17. 

  18.     <link href="../assets/js/google-code-prettify/prettify.css" rel="stylesheet">

  19. 

  20.     <!-- Le fav and touch icons -->

  21.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">

  22.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">

  23.       <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">

  24.                     <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

  25.                                    <link rel="shortcut icon" href="../assets/ico/favicon.png">

  26.   </head>

  27.   <body>

  28. 

  29.       <div id="top-nav" class="navbar navbar-fixed-top">

  30.         <div class="navbar-inner">

  31.           <div class="container">

  32.             <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

  33.             <span class="icon-bar"></span>

  34.             <span class="icon-bar"></span>

  35.             <span class="icon-bar"></span>

  36.           </button>

  37.             <div class="nav-collapse collapse">

  38.             <ul class="nav pull-right">

  39.               <li><a href="../index.html"><i class="icon-chevron-left"></i> Back to Frontpage</a></li>

  40.               <li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix" data-offset-top="450">Download</a></li>

  41.             </ul>

  42.             <ul class="nav pull-left">

  43.               

  44.             </ul>

  45.             </div>

  46.           </div>

  47.         </div>

  48.       </div>

  49.    

  50.     <div id="title">

  51.       <div class="container">

  52.         <div class="row">

  53.           <div class="span12">

  54.             <h1>Synced Owls</h1>

  55.           </div>

  56.         </div>

  57.       </div>

  58.     </div>

  59. 

  60.       <div id="demo">

  61.         <div class="container">

  62.           <div class="row">

  63.             <div class="span12">

  64. 

  65.               <div id="sync1" class="owl-carousel">

  66.                 <div class="item"><h1>1</h1></div>

  67.                 <div class="item"><h1>2</h1></div>

  68.                 <div class="item"><h1>3</h1></div>

  69.                 <div class="item"><h1>4</h1></div>

  70.                 <div class="item"><h1>5</h1></div>

  71.                 <div class="item"><h1>6</h1></div>

  72.                 <div class="item"><h1>7</h1></div>

  73.                 <div class="item"><h1>8</h1></div>

  74.                 <div class="item"><h1>9</h1></div>

  75.                 <div class="item"><h1>10</h1></div>

  76.                 <div class="item"><h1>11</h1></div>

  77.                 <div class="item"><h1>12</h1></div>

  78.                 <div class="item"><h1>13</h1></div>

  79.                 <div class="item"><h1>14</h1></div>

  80.                 <div class="item"><h1>15</h1></div>

  81.                 <div class="item"><h1>16</h1></div>

  82.                 <div class="item"><h1>17</h1></div>

  83.                 <div class="item"><h1>18</h1></div>

  84.                 <div class="item"><h1>19</h1></div>

  85.                 <div class="item"><h1>20</h1></div>

  86.                 <div class="item"><h1>21</h1></div>

  87.                 <div class="item"><h1>22</h1></div>

  88.                 <div class="item"><h1>23</h1></div>

  89.               </div>

  90. 

  91.               <div id="sync2" class="owl-carousel">

  92.                 <div class="item" ><h1>1</h1></div>

  93.                 <div class="item" ><h1>2</h1></div>

  94.                 <div class="item" ><h1>3</h1></div>

  95.                 <div class="item" ><h1>4</h1></div>

  96.                 <div class="item" ><h1>5</h1></div>

  97.                 <div class="item" ><h1>6</h1></div>

  98.                 <div class="item" ><h1>7</h1></div>

  99.                 <div class="item" ><h1>8</h1></div>

  100.                 <div class="item" ><h1>9</h1></div>

  101.                 <div class="item"><h1>10</h1></div>

  102.                 <div class="item"><h1>11</h1></div>

  103.                 <div class="item"><h1>12</h1></div>

  104.                 <div class="item"><h1>13</h1></div>

  105.                 <div class="item"><h1>14</h1></div>

  106.                 <div class="item"><h1>15</h1></div>

  107.                 <div class="item"><h1>16</h1></div>

  108.                 <div class="item"><h1>17</h1></div>

  109.                 <div class="item"><h1>18</h1></div>

  110.                 <div class="item"><h1>19</h1></div>

  111.                 <div class="item"><h1>20</h1></div>

  112.                 <div class="item"><h1>21</h1></div>

  113.                 <div class="item"><h1>22</h1></div>

  114.                 <div class="item"><h1>23</h1></div>

  115.               </div>

  116. 

  117. 

  118.             </div>

  119.           </div>

  120.         </div>

  121. 

  122.     </div>

  123. 

  124.     <div id="example-info">

  125.       <div class="container">

  126.         <div class="row">

  127.           <div class="span12">

  128.             <h1>Setup</h1>

  129.             <p>This is an example of using two synced Owl Carousel. This is not out of the box function, rather a demo or even "how to".

  130.             </p>

  131.             <ul class="nav nav-tabs" id="myTab">

  132.               <li class="active"><a href="#javascript">Javascript</a></li>

  133.               <li><a href="#HTML">HTML</a></li>

  134.               <li><a href="#CSS">CSS</a></li>

  135.             </ul>

  136.              

  137.             <div class="tab-content">

  138. 

  139.               <div class="tab-pane active" id="javascript">

  140. <pre class="pre-show prettyprint linenums">

  141. $(document).ready(function() {

  142. 

  143.   var sync1 = $("#sync1");

  144.   var sync2 = $("#sync2");

  145. 

  146.   sync1.owlCarousel({

  147.     singleItem : true,

  148.     slideSpeed : 1000,

  149.     navigation: true,

  150.     pagination:false,

  151.     afterAction : syncPosition,

  152.     responsiveRefreshRate : 200,

  153.   });

  154. 

  155.   sync2.owlCarousel({

  156.     items : 15,

  157.     itemsDesktop      : [1199,10],

  158.     itemsDesktopSmall     : [979,10],

  159.     itemsTablet       : [768,8],

  160.     itemsMobile       : [479,4],

  161.     pagination:false,

  162.     responsiveRefreshRate : 100,

  163.     afterInit : function(el){

  164.       el.find(".owl-item").eq(0).addClass("synced");

  165.     }

  166.   });

  167. 

  168.   function syncPosition(el){

  169.     var current = this.currentItem;

  170.     $("#sync2")

  171.       .find(".owl-item")

  172.       .removeClass("synced")

  173.       .eq(current)

  174.       .addClass("synced")

  175.     if($("#sync2").data("owlCarousel") !== undefined){

  176.       center(current)

  177.     }

  178.   }

  179. 

  180.   $("#sync2").on("click", ".owl-item", function(e){

  181.     e.preventDefault();

  182.     var number = $(this).data("owlItem");

  183.     sync1.trigger("owl.goTo",number);

  184.   });

  185. 

  186.   function center(number){

  187.     var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

  188.     var num = number;

  189.     var found = false;

  190.     for(var i in sync2visible){

  191.       if(num === sync2visible[i]){

  192.         var found = true;

  193.       }

  194.     }

  195. 

  196.     if(found===false){

  197.       if(num>sync2visible[sync2visible.length-1]){

  198.         sync2.trigger("owl.goTo", num - sync2visible.length+2)

  199.       }else{

  200.         if(num - 1 === -1){

  201.           num = 0;

  202.         }

  203.         sync2.trigger("owl.goTo", num);

  204.       }

  205.     } else if(num === sync2visible[sync2visible.length-1]){

  206.       sync2.trigger("owl.goTo", sync2visible[1])

  207.     } else if(num === sync2visible[0]){

  208.       sync2.trigger("owl.goTo", num-1)

  209.     }

  210.     

  211.   }

  212. 

  213. });

  214. </pre>

  215. 

  216.               </div>

  217. 

  218.               <div class="tab-pane" id="HTML">

  219. <pre class="pre-show prettyprint linenums">

  220. &lt;div id="sync1" class="owl-carousel"&gt;

  221.   &lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;

  222.   &lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;

  223.   &lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;

  224.   &lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;

  225.   &lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;

  226.   &lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;

  227.   &lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;

  228.   &lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;

  229.   &lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;

  230.   &lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;

  231.   &lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;

  232.   &lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;

  233.   &lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;

  234.   &lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;

  235.   &lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;

  236.   &lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;

  237.   &lt;div class="item"&gt;&lt;h1&gt;17&lt;/h1&gt;&lt;/div&gt;

  238.   &lt;div class="item"&gt;&lt;h1&gt;18&lt;/h1&gt;&lt;/div&gt;

  239.   &lt;div class="item"&gt;&lt;h1&gt;19&lt;/h1&gt;&lt;/div&gt;

  240.   &lt;div class="item"&gt;&lt;h1&gt;20&lt;/h1&gt;&lt;/div&gt;

  241.   &lt;div class="item"&gt;&lt;h1&gt;21&lt;/h1&gt;&lt;/div&gt;

  242.   &lt;div class="item"&gt;&lt;h1&gt;22&lt;/h1&gt;&lt;/div&gt;

  243.   &lt;div class="item"&gt;&lt;h1&gt;23&lt;/h1&gt;&lt;/div&gt;

  244. &lt;/div&gt;

  245. &lt;div id="sync2" class="owl-carousel"&gt;

  246.   &lt;div class="item"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;

  247.   &lt;div class="item"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;

  248.   &lt;div class="item"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;

  249.   &lt;div class="item"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;

  250.   &lt;div class="item"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;

  251.   &lt;div class="item"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;

  252.   &lt;div class="item"&gt;&lt;h1&gt;7&lt;/h1&gt;&lt;/div&gt;

  253.   &lt;div class="item"&gt;&lt;h1&gt;8&lt;/h1&gt;&lt;/div&gt;

  254.   &lt;div class="item"&gt;&lt;h1&gt;9&lt;/h1&gt;&lt;/div&gt;

  255.   &lt;div class="item"&gt;&lt;h1&gt;10&lt;/h1&gt;&lt;/div&gt;

  256.   &lt;div class="item"&gt;&lt;h1&gt;11&lt;/h1&gt;&lt;/div&gt;

  257.   &lt;div class="item"&gt;&lt;h1&gt;12&lt;/h1&gt;&lt;/div&gt;

  258.   &lt;div class="item"&gt;&lt;h1&gt;13&lt;/h1&gt;&lt;/div&gt;

  259.   &lt;div class="item"&gt;&lt;h1&gt;14&lt;/h1&gt;&lt;/div&gt;

  260.   &lt;div class="item"&gt;&lt;h1&gt;15&lt;/h1&gt;&lt;/div&gt;

  261.   &lt;div class="item"&gt;&lt;h1&gt;16&lt;/h1&gt;&lt;/div&gt;

  262.   &lt;div class="item"&gt;&lt;h1&gt;17&lt;/h1&gt;&lt;/div&gt;

  263.   &lt;div class="item"&gt;&lt;h1&gt;18&lt;/h1&gt;&lt;/div&gt;

  264.   &lt;div class="item"&gt;&lt;h1&gt;19&lt;/h1&gt;&lt;/div&gt;

  265.   &lt;div class="item"&gt;&lt;h1&gt;20&lt;/h1&gt;&lt;/div&gt;

  266.   &lt;div class="item"&gt;&lt;h1&gt;21&lt;/h1&gt;&lt;/div&gt;

  267.   &lt;div class="item"&gt;&lt;h1&gt;22&lt;/h1&gt;&lt;/div&gt;

  268.   &lt;div class="item"&gt;&lt;h1&gt;23&lt;/h1&gt;&lt;/div&gt;

  269. &lt;/div&gt;

  270. </pre>

  271.               </div>

  272. 

  273.               <div class="tab-pane" id="CSS">

  274. <pre class="pre-show prettyprint linenums">

  275. #sync1 .item{

  276.     background: #0c83e7;

  277.     padding: 80px 0px;

  278.     margin: 5px;

  279.     color: #FFF;

  280.     -webkit-border-radius: 3px;

  281.     -moz-border-radius: 3px;

  282.     border-radius: 3px;

  283.     text-align: center;

  284. }

  285. #sync2 .item{

  286.     background: #C9C9C9;

  287.     padding: 10px 0px;

  288.     margin: 5px;

  289.     color: #FFF;

  290.     -webkit-border-radius: 3px;

  291.     -moz-border-radius: 3px;

  292.     border-radius: 3px;

  293.     text-align: center;

  294.     cursor: pointer;

  295. }

  296. #sync2 .item h1{

  297.   font-size: 18px;

  298. }

  299. #sync2 .synced .item{

  300.   background: #0c83e7;

  301. }

  302. 

  303. </pre>

  304.               </div>

  305.             </div><!--End Tab Content-->

  306. 

  307.           </div>

  308.         </div>

  309.       </div>

  310.     </div>

  311. 

  312.     <div id="more">

  313.       <div class="container">

  314. 

  315.         <div class="row">

  316.           <div class="span12">

  317.             <h1>More Demos</h1>

  318.           </div>

  319.         </div>

  320. 

  321.         <div class="row demos-row">

  322.           <div class="span3">

  323.             <a href="images.html" class="demo-box">

  324.               <div class="demo-wrapper demo-images clearfix">

  325.                 <div class="demo-slide"><div class="bg"></div></div>

  326.                 <div class="demo-slide"><div class="bg"></div></div>

  327.                 <div class="demo-slide"><div class="bg"></div></div>

  328.               </div>

  329.               <h3>Images</h3>

  330.             </a>

  331.           </div>

  332. 

  333.           <div class="span3">

  334.             <a href="custom.html" class="demo-box">

  335.               <div class="demo-wrapper demo-custom clearfix">

  336.                 <div class="demo-slide"><div class="bg"></div></div>

  337.                 <div class="demo-slide"><div class="bg"></div></div>

  338.                 <div class="demo-slide"><div class="bg"></div></div>

  339.                 <div class="demo-slide"><div class="bg"></div></div>

  340.                 <div class="demo-slide"><div class="bg"></div></div>

  341.                 <div class="demo-slide"><div class="bg"></div></div>

  342.                 <div class="demo-slide"><div class="bg"></div></div>

  343.                 <div class="demo-slide"><div class="bg"></div></div>

  344.                 <div class="demo-slide"><div class="bg"></div></div>

  345.                 <div class="demo-slide"><div class="bg"></div></div>

  346.               </div>

  347.               <h3>Custom</h3>

  348.             </a>

  349.           </div>

  350. 

  351.           <div class="span3">

  352.             <a href="itemsCustom.html" class="demo-box">

  353.               <div class="demo-wrapper demo-full clearfix">

  354.                 <div class="demo-slide"><div class="bg"></div></div>

  355.                 <div class="demo-slide"><div class="bg"></div></div>

  356.                 <div class="demo-slide"><div class="bg"></div></div>

  357.                 <div class="demo-slide"><div class="bg"></div></div>

  358.               </div>

  359.               <h3>Custom 2</h3>

  360.             </a>

  361.           </div>

  362. 

  363.           <div class="span3">

  364.             <a href="one.html" class="demo-box">

  365.               <div class="demo-wrapper demo-one clearfix">

  366.                 <div class="demo-slide"><div class="bg"></div></div>

  367.               </div>

  368.               <h3>One Slide</h3>

  369.             </a>

  370.           </div>

  371. 

  372.         </div>

  373.         <div class="row demos-row">

  374.           <div class="span3">

  375.             <a href="json.html" class="demo-box">

  376.               <div class="demo-wrapper demo-Json clearfix">

  377.                 <div class="demo-slide"><div class="bg"></div></div>

  378.                 <div class="demo-slide"><div class="bg"></div></div>

  379.                 <div class="demo-slide"><div class="bg"></div></div>

  380.                 <div class="demo-slide"><div class="bg"></div></div>

  381.                 <div class="demo-slide"><div class="bg"></div></div>

  382.               </div>

  383.               <h3>JSON</h3>

  384.             </a>

  385.           </div>

  386. 

  387.           <div class="span3">

  388.             <a href="customJson.html" class="demo-box">

  389.               <div class="demo-wrapper demo-Json-custom clearfix">

  390.                 <div class="demo-slide"><div class="bg"></div></div>

  391.                 <div class="demo-slide"><div class="bg"></div></div>

  392.                 <div class="demo-slide"><div class="bg"></div></div>

  393.               </div>

  394.               <h3>JSON Custom</h3>

  395.             </a>

  396.           </div>

  397. 

  398.           <div class="span3">

  399.             <a href="lazyLoad.html" class="demo-box">

  400.               <div class="demo-wrapper demo-lazy clearfix">

  401.                 <div class="demo-slide"><div class="bg"></div></div>

  402.                 <div class="demo-slide"><div class="bg"></div></div>

  403.                 <div class="demo-slide"><div class="bg"></div></div>

  404.               </div>

  405.               <h3>Lazy Load</h3>

  406.             </a>

  407.           </div>

  408. 

  409.           <div class="span3">

  410.             <a href="autoHeight.html" class="demo-box">

  411.               <div class="demo-wrapper demo-height clearfix">

  412.                 <div class="demo-slide"><div class="bg"></div></div>

  413.               </div>

  414.               <h3>Auto Height</h3>

  415.             </a>

  416.           </div>

  417. 

  418.         </div>

  419.       </div>

  420.     </div>

  421. 

  422. 

  423.  

  424.     <div id="footer">

  425.       <div class="container">

  426.         <div class="row">

  427.           <div class="span12">

  428.             <h5>Bartosz Wojciechowski 2013 / @OwlFonk / 

  429.             <a href="mailto:owl@owlgraphic.com?subject=Hey Owl!">email</a> / 

  430.             <a href="../changelog.html">changelog</a> /

  431.             <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=EFSGXZS7V2U9N">donate</a> / 

  432.             <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://owlgraphic.com/owlcarousel/" data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none" data-hashtags="owlcarousel"></a>

  433.             <script>

  434.             var owldomain = window.location.hostname.indexOf("owlgraphic");

  435.             if(owldomain !== -1){

  436.               !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

  437.             }

  438.             </script>

  439.             </h5>

  440.           </div>

  441.         </div>

  442.       </div>

  443.     </div>

  444. 

  445. 

  446.     <script src="../assets/js/jquery-1.9.1.min.js"></script> 

  447.     <script src="../owl-carousel/owl.carousel.js"></script>

  448. 

  449. 

  450.     <!-- Demo -->

  451. 

  452.     <style>

  453.     #sync1 .item{

  454.         background: #0c83e7;

  455.         padding: 80px 0px;

  456.         margin: 5px;

  457.         color: #FFF;

  458.         -webkit-border-radius: 3px;

  459.         -moz-border-radius: 3px;

  460.         border-radius: 3px;

  461.         text-align: center;

  462.     }

  463.     #sync2 .item{

  464.         background: #C9C9C9;

  465.         padding: 10px 0px;

  466.         margin: 5px;

  467.         color: #FFF;

  468.         -webkit-border-radius: 3px;

  469.         -moz-border-radius: 3px;

  470.         border-radius: 3px;

  471.         text-align: center;

  472.         cursor: pointer;

  473.     }

  474.     #sync2 .item h1{

  475.       font-size: 18px;

  476.     }

  477.     #sync2 .synced .item{

  478.       background: #0c83e7;

  479.     }

  480.     </style>

  481. 

  482. 

  483.     <script>

  484.     $(document).ready(function() {

  485. 

  486.       var sync1 = $("#sync1");

  487.       var sync2 = $("#sync2");

  488. 

  489.       sync1.owlCarousel({

  490.         singleItem : true,

  491.         slideSpeed : 1000,

  492.         navigation: true,

  493.         pagination:false,

  494.         afterAction : syncPosition,

  495.         responsiveRefreshRate : 200,

  496.       });

  497. 

  498.       sync2.owlCarousel({

  499.         items : 15,

  500.         itemsDesktop      : [1199,10],

  501.         itemsDesktopSmall     : [979,10],

  502.         itemsTablet       : [768,8],

  503.         itemsMobile       : [479,4],

  504.         pagination:false,

  505.         responsiveRefreshRate : 100,

  506.         afterInit : function(el){

  507.           el.find(".owl-item").eq(0).addClass("synced");

  508.         }

  509.       });

  510. 

  511.       function syncPosition(el){

  512.         var current = this.currentItem;

  513.         $("#sync2")

  514.           .find(".owl-item")

  515.           .removeClass("synced")

  516.           .eq(current)

  517.           .addClass("synced")

  518.         if($("#sync2").data("owlCarousel") !== undefined){

  519.           center(current)

  520.         }

  521. 

  522.       }

  523. 

  524.       $("#sync2").on("click", ".owl-item", function(e){

  525.         e.preventDefault();

  526.         var number = $(this).data("owlItem");

  527.         sync1.trigger("owl.goTo",number);

  528.       });

  529. 

  530.       function center(number){

  531.         var sync2visible = sync2.data("owlCarousel").owl.visibleItems;

  532. 

  533.         var num = number;

  534.         var found = false;

  535.         for(var i in sync2visible){

  536.           if(num === sync2visible[i]){

  537.             var found = true;

  538.           }

  539.         }

  540. 

  541.         if(found===false){

  542.           if(num>sync2visible[sync2visible.length-1]){

  543.             sync2.trigger("owl.goTo", num - sync2visible.length+2)

  544.           }else{

  545.             if(num - 1 === -1){

  546.               num = 0;

  547.             }

  548.             sync2.trigger("owl.goTo", num);

  549.           }

  550.         } else if(num === sync2visible[sync2visible.length-1]){

  551.           sync2.trigger("owl.goTo", sync2visible[1])

  552.         } else if(num === sync2visible[0]){

  553.           sync2.trigger("owl.goTo", num-1)

  554.         }

  555.       }

  556. 

  557.     });

  558.     </script>

  559. 

  560. 

  561.     <script src="../assets/js/bootstrap-collapse.js"></script>

  562.     <script src="../assets/js/bootstrap-transition.js"></script>

  563.     <script src="../assets/js/bootstrap-tab.js"></script>

  564. 

  565.     <script src="../assets/js/google-code-prettify/prettify.js"></script>

  566. 	  <script src="../assets/js/application.js"></script>

  567. 

  568.   </body>

  569. </html>