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.

122 lines
3.9 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. # Owl Carousel 2
  2. Touch enabled [jQuery](https://jquery.com/) plugin that lets you create a beautiful, responsive carousel slider. **To get started, check out https://owlcarousel2.github.io/OwlCarousel2/.**
  3. **Notice:** The old Owl Carousel site (owlgraphic [dot] com) is no longer in use. Please delete all references to this in bookmarks and your own products' documentation as it's being used for malicious purposes.
  4. ## Quick start
  5. ### Install
  6. This package can be installed with:
  7. - [npm](https://www.npmjs.com/package/owl.carousel): `npm install --save owl.carousel` or `yarn add owl.carousel jquery`
  8. - [bower](http://bower.io/search/?q=owl.carousel): `bower install --save owl.carousel`
  9. Or download the [latest release](https://github.com/OwlCarousel2/OwlCarousel2/releases).
  10. ### Load
  11. #### Webpack
  12. Add jQuery via the "webpack.ProvidePlugin" to your webpack configuration:
  13. const webpack = require('webpack');
  14. //...
  15. plugins: [
  16. new webpack.ProvidePlugin({
  17. $: 'jquery',
  18. jQuery: 'jquery',
  19. 'window.jQuery': 'jquery'
  20. }),
  21. ],
  22. //...
  23. Load the required stylesheet and JS:
  24. ```js
  25. import 'owl.carousel/dist/assets/owl.carousel.css';
  26. import 'owl.carousel';
  27. ```
  28. #### Static HTML
  29. Put the required stylesheet at the [top](https://developer.yahoo.com/performance/rules.html#css_top) of your markup:
  30. ```html
  31. <link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
  32. ```
  33. ```html
  34. <link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" />
  35. ```
  36. **NOTE:** If you want to use the default navigation styles, you will also need to include `owl.theme.default.css`.
  37. Put the script at the [bottom](https://developer.yahoo.com/performance/rules.html#js_bottom) of your markup right after jQuery:
  38. ```html
  39. <script src="/node_modules/jquery/dist/jquery.js"></script>
  40. <script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
  41. ```
  42. ```html
  43. <script src="/bower_components/jquery/dist/jquery.js"></script>
  44. <script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script>
  45. ```
  46. ### Usage
  47. Wrap your items (`div`, `a`, `img`, `span`, `li` etc.) with a container element (`div`, `ul` etc.). Only the class `owl-carousel` is mandatory to apply proper styles:
  48. ```html
  49. <div class="owl-carousel owl-theme">
  50. <div> Your Content </div>
  51. <div> Your Content </div>
  52. <div> Your Content </div>
  53. <div> Your Content </div>
  54. <div> Your Content </div>
  55. <div> Your Content </div>
  56. <div> Your Content </div>
  57. </div>
  58. ```
  59. **NOTE:** The `owl-theme` class is optional, but without it, you will need to style navigation features on your own.
  60. Call the [plugin](https://learn.jquery.com/plugins/) function and your carousel is ready.
  61. ```javascript
  62. $(document).ready(function(){
  63. $('.owl-carousel').owlCarousel();
  64. });
  65. ```
  66. ## Documentation
  67. The documentation, included in this repo in the root directory, is built with [Assemble](http://assemble.io/) and publicly available at https://owlcarousel2.github.io/OwlCarousel2/. The documentation may also be run locally.
  68. ## Building
  69. This package comes with [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). The following tasks are available:
  70. * `default` compiles the CSS and JS into `/dist` and builds the doc.
  71. * `dist` compiles the CSS and JS into `/dist` only.
  72. * `watch` watches source files and builds them automatically whenever you save.
  73. * `test` runs [JSHint](http://www.jshint.com/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/).
  74. To define which plugins are build into the distribution just edit `/_config.json` to fit your needs.
  75. ## Contributing
  76. Please read [CONTRIBUTING.md](CONTRIBUTING.md).
  77. ## Roadmap
  78. Please make sure to check out our [Roadmap Discussion](https://github.com/OwlCarousel2/OwlCarousel2/issues/1756).
  79. ## License
  80. The code and the documentation are released under the [MIT License](LICENSE).