You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

238 lines
8.5 KiB

1 year ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <!-- head -->
  5. <meta charset="utf-8">
  6. <meta name="msapplication-tap-highlight" content="no" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8. <meta name="description" content="Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.">
  9. <meta name="author" content="David Deutsch">
  10. <title>
  11. Home | Owl Carousel | 2.3.4
  12. </title>
  13. <!-- Stylesheets -->
  14. <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,300italic' rel='stylesheet' type='text/css'>
  15. <link rel="stylesheet" href="assets/css/docs.theme.min.css">
  16. <!-- Owl Stylesheets -->
  17. <link rel="stylesheet" href="assets/owlcarousel/assets/owl.carousel.min.css">
  18. <link rel="stylesheet" href="assets/owlcarousel/assets/owl.theme.default.min.css">
  19. <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
  20. <!--[if lt IE 9]>
  21. <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  22. <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  23. <![endif]-->
  24. <!-- Favicons -->
  25. <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/ico/apple-touch-icon-144-precomposed.png">
  26. <link rel="shortcut icon" href="assets/ico/favicon.png">
  27. <link rel="shortcut icon" href="favicon.ico">
  28. <!-- Yeah i know js should not be in header. Its required for demos.-->
  29. <!-- javascript -->
  30. <script src="assets/vendors/jquery.min.js"></script>
  31. <script src="assets/owlcarousel/owl.carousel.js"></script>
  32. </head>
  33. <body>
  34. <!-- header -->
  35. <header class="header">
  36. <div class="row">
  37. <div class="large-12 columns">
  38. <div class="brand left">
  39. <h3>
  40. <a href="/OwlCarousel2/">owl.carousel.js</a>
  41. </h3>
  42. </div>
  43. <a id="toggle-nav" class="right">
  44. <span></span> <span></span> <span></span>
  45. </a>
  46. <div class="nav-bar">
  47. <ul class="clearfix">
  48. <li class="active">
  49. <a href="/OwlCarousel2/index.html">Home</a>
  50. </li>
  51. <li> <a href="/OwlCarousel2/demos/demos.html">Demos</a> </li>
  52. <li> <a href="/OwlCarousel2/docs/started-welcome.html">Docs</a> </li>
  53. <li>
  54. <a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip">Download</a>
  55. <span class="download"></span>
  56. </li>
  57. </ul>
  58. </div>
  59. </div>
  60. </div>
  61. </header>
  62. <!-- home panel -->
  63. <section id="hero">
  64. <div class="row">
  65. <div class="large-8 medium-8 columns">
  66. <h1>Owl Carousel 2</h1>
  67. <h4>Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider.</h4>
  68. <a href="https://github.com/OwlCarousel2/OwlCarousel2/archive/2.3.4.zip" class="hero-button">Download</a>
  69. <a href="https://github.com/OwlCarousel2/OwlCarousel2" class="hero-button outline">Github</a>
  70. <p>2.3.4</p>
  71. </div>
  72. <div class="large-4 medium-4 columns">
  73. <img class="owl-logo" src="assets/img/owl-logo.png" alt="mr. Owl">
  74. </div>
  75. </div>
  76. </section>
  77. <!-- body -->
  78. <div class="home-demo">
  79. <div class="row">
  80. <div class="large-12 columns">
  81. <h3>Demo</h3>
  82. <div class="owl-carousel">
  83. <div class="item">
  84. <h2>Swipe</h2>
  85. </div>
  86. <div class="item">
  87. <h2>Drag</h2>
  88. </div>
  89. <div class="item">
  90. <h2>Responsive</h2>
  91. </div>
  92. <div class="item">
  93. <h2>CSS3</h2>
  94. </div>
  95. <div class="item">
  96. <h2>Fast</h2>
  97. </div>
  98. <div class="item">
  99. <h2>Easy</h2>
  100. </div>
  101. <div class="item">
  102. <h2>Free</h2>
  103. </div>
  104. <div class="item">
  105. <h2>Upgradable</h2>
  106. </div>
  107. <div class="item">
  108. <h2>Tons of options</h2>
  109. </div>
  110. <div class="item">
  111. <h2>Infinity</h2>
  112. </div>
  113. <div class="item">
  114. <h2>Auto Width</h2>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </div>
  120. <script>
  121. var owl = $('.owl-carousel');
  122. owl.owlCarousel({
  123. margin: 10,
  124. loop: true,
  125. responsive: {
  126. 0: {
  127. items: 1
  128. },
  129. 600: {
  130. items: 2
  131. },
  132. 1000: {
  133. items: 3
  134. }
  135. }
  136. })
  137. </script>
  138. <!-- features -->
  139. <div id="features">
  140. <div class="row">
  141. <div class="small-12 medium-9 small-centered columns">
  142. <section class="row feature">
  143. <div class="medium-4 small-12 columns">
  144. <img src="assets/img/feature-options.png" alt="">
  145. </div>
  146. <div class="medium-8 small-12 columns">
  147. <h2>Fully Customisable</h2>
  148. <p>Over 60 options. Easy for novice users and even more powerful for advanced developers.</p>
  149. </div>
  150. </section>
  151. <section class="row feature">
  152. <div class="medium-4 small-12 columns">
  153. <img src="assets/img/feature-drag.png" alt="">
  154. </div>
  155. <div class="medium-8 small-12 columns">
  156. <h2>Touch and Drag Support</h2>
  157. <p>Designed specially to boost mobile browsing experience. Mouse drag works great on desktop too!</p>
  158. </div>
  159. </section>
  160. <section class="row feature">
  161. <div class="medium-4 small-12 columns">
  162. <img src="assets/img/feature-responsive.png" alt="">
  163. </div>
  164. <div class="medium-8 small-12 columns">
  165. <h2>Fully Responsive</h2>
  166. <p>Almost all options are responsive and include very intuitive breakpoints settings.</p>
  167. </div>
  168. </section>
  169. <section class="row feature">
  170. <div class="medium-4 small-12 columns">
  171. <img src="assets/img/feature-modern.png" alt="">
  172. </div>
  173. <div class="medium-8 small-12 columns">
  174. <h2>Modern Browsers</h2>
  175. <p>Owl uses hardware acceleration with CSS3 Translate3d transitions. Its fast and works like a charm! </p>
  176. </div>
  177. </section>
  178. <section class="row feature">
  179. <div class="medium-4 small-12 columns">
  180. <img src="assets/img/feature-zombie.png" alt="">
  181. </div>
  182. <div class="medium-8 small-12 columns">
  183. <h2>Zombie Browsers</h2>
  184. <p>CSS2 fallback supported for older browser.</p>
  185. </div>
  186. </section>
  187. <section class="row feature">
  188. <div class="medium-4 small-12 columns">
  189. <img src="assets/img/feature-module.png" alt="">
  190. </div>
  191. <div class="medium-8 small-12 columns">
  192. <h2>Modules and Plugins</h2>
  193. <p>Owl Carousel supports plugin modular structure. Therefore, you can detach plugins that you won&#x27;t use on your project or create new ones that fit your needs</p>
  194. </div>
  195. </section>
  196. </div>
  197. </div>
  198. </div>
  199. <!-- footer -->
  200. <section id="teaser-text">
  201. <div class="row">
  202. <div class="small-12 medium-11 small-centered columns">
  203. <hr>
  204. <h3 id="owl-carousel-has-been-choosen-as-number-one-jquery-plugin-by-hundreds-of-developers-now-its-time-for-a-new-version-that-comes-with-lots-of-new-features-and-even-more-user-friendly-api-">Owl Carousel has been choosen as number one jQuery plugin by hundreds of developers. Now its time for a new version that comes with lots of new features and even more user friendly API.</h3>
  205. <p>Watch this space- we&#39;ll be launching soon :)</p>
  206. </div>
  207. </div>
  208. </section>
  209. <!-- footer -->
  210. <footer class="footer">
  211. <div class="row">
  212. <div class="large-12 columns">
  213. <h5>
  214. <a href="/OwlCarousel2/docs/support-contact.html">David Deutsch</a>
  215. <a id="custom-tweet-button" href="https://twitter.com/share?url=https://github.com/OwlCarousel2/OwlCarousel2&text=Owl Carousel - This is so awesome! " target="_blank"></a>
  216. </h5>
  217. </div>
  218. </div>
  219. </footer>
  220. <!-- vendors -->
  221. <script src="assets/vendors/highlight.js"></script>
  222. <script src="assets/js/app.js"></script>
  223. </body>
  224. </html>