Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 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>