PageRenderTime 47ms CodeModel.GetById 15ms RepoModel.GetById 0ms app.codeStats 0ms

/public/assets/theme/assets/global/plugins/carousel-owl-carousel/demos/one.html

https://gitlab.com/techniconline/kmc
HTML | 393 lines | 340 code | 50 blank | 3 comment | 0 complexity | 15220f06c46aced3293037c1b57e9667 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

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

  5.     <title>Owl Carousel - One slide</title>
    6. 

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

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

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

  9. 

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

  11.           type='text/css'>
    12. 

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

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

  14. 

  15.     <!-- Owl Carousel Assets -->
    16. 

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

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

  18. 

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

  20. 

  21.     <!-- Le fav and touch icons -->
    22. 

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

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

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

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

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

  27. </head>
    28. 

  28. <body>
    29. 

  29. 

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

  31.     <div class="navbar-inner">
    32. 

  32.         <div class="container">
    33. 

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

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

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

  36.                 <span class="icon-bar"></span>
    37. 

  37.             </button>
    38. 

  38.             <div class="nav-collapse collapse">
    39. 

  39.                 <ul class="nav pull-right">
    40. 

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

  41.                     <li><a href="../owl.carousel.zip" class="download download-on" data-spy="affix"
    42. 

  42.                            data-offset-top="450">Download</a></li>
    43. 

  43.                 </ul>
    44. 

  44.                 <ul class="nav pull-left">
    45. 

  45. 

  46.                 </ul>
    47. 

  47.             </div>
    48. 

  48.         </div>
    49. 

  49.     </div>
    50. 

  50. </div>
    51. 

  51. 

  52. <div id="title">
    53. 

  53.     <div class="container">
    54. 

  54.         <div class="row">
    55. 

  55.             <div class="span12">
    56. 

  56.                 <h1>One Item with Image</h1>
    57. 

  57.             </div>
    58. 

  58.         </div>
    59. 

  59.     </div>
    60. 

  60. </div>
    61. 

  61. 

  62. <div id="demo">
    63. 

  63.     <div class="container">
    64. 

  64.         <div class="row">
    65. 

  65.             <div class="span12">
    66. 

  66.                 <div id="owl-demo" class="owl-carousel">
    67. 

  67. 

  68.                     <div class="item"><img src="assets/fullimage1.jpg" alt="The Last of us"></div>
    69. 

  69.                     <div class="item"><img src="assets/fullimage2.jpg" alt="GTA V"></div>
    70. 

  70.                     <div class="item"><img src="assets/fullimage3.jpg" alt="Mirror Edge"></div>
    71. 

  71. 

  72.                 </div>
    73. 

  73.             </div>
    74. 

  74.         </div>
    75. 

  75.     </div>
    76. 

  76. </div>
    77. 

  77. 

  78. <div id="example-info">
    79. 

  79.     <div class="container">
    80. 

  80.         <div class="row">
    81. 

  81.             <div class="span12">
    82. 

  82.                 <h1>Setup</h1>
    83. 

  83. 

  84.                 <p>In order for the images to auto fit to slider containers use width 100% on <img>. Check CSS below</p>
    85. 

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

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

  87.                     <li><a href="#HTML">HTML</a></li>
    88. 

  88.                     <li><a href="#CSS">CSS</a></li>
    89. 

  89.                 </ul>
    90. 

  90. 

  91.                 <div class="tab-content">
    92. 

  92. 

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

  94. <pre class="pre-show prettyprint linenums">
    95. 

  95. $(document).ready(function() {
    96. 

  96. 

  97.   $("#owl-demo").owlCarousel({
    98. 

  98. 

  99.       navigation : true, // Show next and prev buttons
    100. 

  100.       slideSpeed : 300,
    101. 

  101.       paginationSpeed : 400,
    102. 

  102.       singleItem:true
    103. 

  103. 

  104.       // "singleItem:true" is a shortcut for:
    105. 

  105.       // items : 1, 
    106. 

  106.       // itemsDesktop : false,
    107. 

  107.       // itemsDesktopSmall : false,
    108. 

  108.       // itemsTablet: false,
    109. 

  109.       // itemsMobile : false
    110. 

  110. 

  111.   });
    112. 

  112. 

  113. });
    114. 

  114. </pre>
    115. 

  115. 

  116.                     </div>
    117. 

  117. 

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

  119. <pre class="pre-show prettyprint linenums">
    120. 

  120. &lt;div id="owl-demo" class="owl-carousel owl-theme"&gt;
    121. 

  121. 

  122.   &lt;div class="item"&gt;&lt;img src="assets/fullimage1.jpg" alt="The Last of us"&gt;&lt;/div&gt;
    123. 

  123.   &lt;div class="item"&gt;&lt;img src="assets/fullimage2.jpg" alt="GTA V"&gt;&lt;/div&gt;
    124. 

  124.   &lt;div class="item"&gt;&lt;img src="assets/fullimage3.jpg" alt="Mirror Edge"&gt;&lt;/div&gt;
    125. 

  125. 

  126. &lt;/div&gt;
    127. 

  127. </pre>
    128. 

  128.                     </div>
    129. 

  129. 

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

  131. <pre class="pre-show prettyprint linenums">
    132. 

  132. #owl-demo .item img{
    133. 

  133.     display: block;
    134. 

  134.     width: 100%;
    135. 

  135.     height: auto;
    136. 

  136. }
    137. 

  137. </pre>
    138. 

  138.                     </div>
    139. 

  139.                 </div><!--End Tab Content-->
    140. 

  140. 

  141.             </div>
    142. 

  142.         </div>
    143. 

  143.     </div>
    144. 

  144. </div>
    145. 

  145. 

  146. <div id="more">
    147. 

  147.     <div class="container">
    148. 

  148. 

  149.         <div class="row">
    150. 

  150.             <div class="span12">
    151. 

  151.                 <h1>More Demos</h1>
    152. 

  152.             </div>
    153. 

  153.         </div>
    154. 

  154. 

  155.         <div class="row demos-row">
    156. 

  156.             <div class="span3">
    157. 

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

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

  159.                         <div class="demo-slide">
    160. 

  160.                             <div class="bg"></div>
    161. 

  161.                         </div>
    162. 

  162.                         <div class="demo-slide">
    163. 

  163.                             <div class="bg"></div>
    164. 

  164.                         </div>
    165. 

  165.                         <div class="demo-slide">
    166. 

  166.                             <div class="bg"></div>
    167. 

  167.                         </div>
    168. 

  168.                     </div>
    169. 

  169.                     <h3>Images</h3>
    170. 

  170.                 </a>
    171. 

  171.             </div>
    172. 

  172. 

  173.             <div class="span3">
    174. 

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

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

  176.                         <div class="demo-slide">
    177. 

  177.                             <div class="bg"></div>
    178. 

  178.                         </div>
    179. 

  179.                         <div class="demo-slide">
    180. 

  180.                             <div class="bg"></div>
    181. 

  181.                         </div>
    182. 

  182.                         <div class="demo-slide">
    183. 

  183.                             <div class="bg"></div>
    184. 

  184.                         </div>
    185. 

  185.                         <div class="demo-slide">
    186. 

  186.                             <div class="bg"></div>
    187. 

  187.                         </div>
    188. 

  188.                         <div class="demo-slide">
    189. 

  189.                             <div class="bg"></div>
    190. 

  190.                         </div>
    191. 

  191.                         <div class="demo-slide">
    192. 

  192.                             <div class="bg"></div>
    193. 

  193.                         </div>
    194. 

  194.                         <div class="demo-slide">
    195. 

  195.                             <div class="bg"></div>
    196. 

  196.                         </div>
    197. 

  197.                         <div class="demo-slide">
    198. 

  198.                             <div class="bg"></div>
    199. 

  199.                         </div>
    200. 

  200.                         <div class="demo-slide">
    201. 

  201.                             <div class="bg"></div>
    202. 

  202.                         </div>
    203. 

  203.                         <div class="demo-slide">
    204. 

  204.                             <div class="bg"></div>
    205. 

  205.                         </div>
    206. 

  206.                     </div>
    207. 

  207.                     <h3>Custom</h3>
    208. 

  208.                 </a>
    209. 

  209.             </div>
    210. 

  210. 

  211.             <div class="span3">
    212. 

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

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

  214.                         <div class="demo-slide">
    215. 

  215.                             <div class="bg"></div>
    216. 

  216.                         </div>
    217. 

  217.                         <div class="demo-slide">
    218. 

  218.                             <div class="bg"></div>
    219. 

  219.                         </div>
    220. 

  220.                         <div class="demo-slide">
    221. 

  221.                             <div class="bg"></div>
    222. 

  222.                         </div>
    223. 

  223.                         <div class="demo-slide">
    224. 

  224.                             <div class="bg"></div>
    225. 

  225.                         </div>
    226. 

  226.                     </div>
    227. 

  227.                     <h3>Custom 2</h3>
    228. 

  228.                 </a>
    229. 

  229.             </div>
    230. 

  230. 

  231.             <div class="span3">
    232. 

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

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

  234.                         <div class="demo-slide">
    235. 

  235.                             <div class="bg"></div>
    236. 

  236.                         </div>
    237. 

  237.                     </div>
    238. 

  238.                     <h3>One Slide</h3>
    239. 

  239.                 </a>
    240. 

  240.             </div>
    241. 

  241. 

  242.         </div>
    243. 

  243.         <div class="row demos-row">
    244. 

  244.             <div class="span3">
    245. 

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

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

  247.                         <div class="demo-slide">
    248. 

  248.                             <div class="bg"></div>
    249. 

  249.                         </div>
    250. 

  250.                         <div class="demo-slide">
    251. 

  251.                             <div class="bg"></div>
    252. 

  252.                         </div>
    253. 

  253.                         <div class="demo-slide">
    254. 

  254.                             <div class="bg"></div>
    255. 

  255.                         </div>
    256. 

  256.                         <div class="demo-slide">
    257. 

  257.                             <div class="bg"></div>
    258. 

  258.                         </div>
    259. 

  259.                         <div class="demo-slide">
    260. 

  260.                             <div class="bg"></div>
    261. 

  261.                         </div>
    262. 

  262.                     </div>
    263. 

  263.                     <h3>JSON</h3>
    264. 

  264.                 </a>
    265. 

  265.             </div>
    266. 

  266. 

  267.             <div class="span3">
    268. 

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

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

  270.                         <div class="demo-slide">
    271. 

  271.                             <div class="bg"></div>
    272. 

  272.                         </div>
    273. 

  273.                         <div class="demo-slide">
    274. 

  274.                             <div class="bg"></div>
    275. 

  275.                         </div>
    276. 

  276.                         <div class="demo-slide">
    277. 

  277.                             <div class="bg"></div>
    278. 

  278.                         </div>
    279. 

  279.                     </div>
    280. 

  280.                     <h3>JSON Custom</h3>
    281. 

  281.                 </a>
    282. 

  282.             </div>
    283. 

  283. 

  284.             <div class="span3">
    285. 

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

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

  287.                         <div class="demo-slide">
    288. 

  288.                             <div class="bg"></div>
    289. 

  289.                         </div>
    290. 

  290.                         <div class="demo-slide">
    291. 

  291.                             <div class="bg"></div>
    292. 

  292.                         </div>
    293. 

  293.                         <div class="demo-slide">
    294. 

  294.                             <div class="bg"></div>
    295. 

  295.                         </div>
    296. 

  296.                     </div>
    297. 

  297.                     <h3>Lazy Load</h3>
    298. 

  298.                 </a>
    299. 

  299.             </div>
    300. 

  300. 

  301.             <div class="span3">
    302. 

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

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

  304.                         <div class="demo-slide">
    305. 

  305.                             <div class="bg"></div>
    306. 

  306.                         </div>
    307. 

  307.                     </div>
    308. 

  308.                     <h3>Auto Height</h3>
    309. 

  309.                 </a>
    310. 

  310.             </div>
    311. 

  311. 

  312.         </div>
    313. 

  313.     </div>
    314. 

  314. </div>
    315. 

  315. 

  316. <div id="footer">
    317. 

  317.     <div class="container">
    318. 

  318.         <div class="row">
    319. 

  319.             <div class="span12">
    320. 

  320.                 <h5>Bartosz Wojciechowski 2013 / @OwlFonk /
    321. 

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

  322.                     <a href="../changelog.html">changelog</a> /
    323. 

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

  324.                     /
    325. 

  325.                     <a href="https://twitter.com/share" class="twitter-share-button"
    326. 

  326.                        data-url="http://owlgraphic.com/owlcarousel/"
    327. 

  327.                        data-text="Awesome jQuery Owl Carousel Responsive Plugin" data-via="OwlFonk" data-count="none"
    328. 

  328.                        data-hashtags="owlcarousel"></a>
    329. 

  329.                     <script>
    330. 

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

  331.                         if (owldomain !== -1) {
    332. 

  332.                             !function (d, s, id) {
    333. 

  333.                                 var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
    334. 

  334.                                 if (!d.getElementById(id)) {
    335. 

  335.                                     js = d.createElement(s);
    336. 

  336.                                     js.id = id;
    337. 

  337.                                     js.src = p + '://platform.twitter.com/widgets.js';
    338. 

  338.                                     fjs.parentNode.insertBefore(js, fjs);
    339. 

  339.                                 }
    340. 

  340.                             }(document, 'script', 'twitter-wjs');
    341. 

  341.                         }
    342. 

  342.                     </script>
    343. 

  343.                 </h5>
    344. 

  344.             </div>
    345. 

  345.         </div>
    346. 

  346.     </div>
    347. 

  347. </div>
    348. 

  348. 

  349. 

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

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

  352. 

  353. 

  354. <!-- Demo -->
    355. 

  355. 

  356. <style>
    357. 

  357.     #owl-demo .item img {
    358. 

  358.         display: block;
    359. 

  359.         width: 100%;
    360. 

  360.         height: auto;
    361. 

  361.     }
    362. 

  362. </style>
    363. 

  363. 

  364. 

  365. <script>
    366. 

  366.     $(document).ready(function () {
    367. 

  367.         $("#owl-demo").owlCarousel({
    368. 

  368. 

  369.             navigation: true,
    370. 

  370.             slideSpeed: 300,
    371. 

  371.             paginationSpeed: 400,
    372. 

  372.             singleItem: true
    373. 

  373. 

  374.             // "singleItem:true" is a shortcut for:
    375. 

  375.             // items : 1,
    376. 

  376.             // itemsDesktop : false,
    377. 

  377.             // itemsDesktopSmall : false,
    378. 

  378.             // itemsTablet: false,
    379. 

  379.             // itemsMobile : false
    380. 

  380. 

  381.         });
    382. 

  382.     });
    383. 

  383. </script>
    384. 

  384. 

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

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

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

  388. 

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

  390. <script src="../assets/js/application.js"></script>
    391. 

  391. 

  392. </body>
    393. 

  393. </html>
    394. 

  394.