-
Notifications
You must be signed in to change notification settings - Fork 109
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
2,205 additions
and
4,226 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"presets": ["es2015", "stage-0", "react"], | ||
"env": { | ||
"development": { | ||
"presets": ["react-hmre"] | ||
} | ||
}, | ||
"plugins": [ | ||
"transform-object-rest-spread", | ||
"add-module-exports" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
{ | ||
|
||
"plugins": [ | ||
"babel", | ||
"react" | ||
], | ||
|
||
"parser": "babel-eslint", | ||
|
||
"env": { | ||
"node": true, | ||
"browser": true, | ||
"es6": true | ||
}, | ||
|
||
"ecmaFeatures": { | ||
"jsx": true, | ||
"experimentalObjectRestSpread": true, | ||
"arrowFunctions": true, | ||
"blockBindings": true, | ||
"templateStrings": true, | ||
"objectLiteralComputedProperties": true, | ||
"objectLiteralShorthandMethod": true, | ||
"objectLiteralShorthandProperties": true, | ||
"modules": true, | ||
"classes": true, | ||
"defaultParams": true, | ||
"destructuring": true, | ||
"forOf": true, | ||
"generators": true, | ||
"regexUFlag": true, | ||
"regexYFlag": true, | ||
"restParams": true, | ||
"spread": true, | ||
"superInFunctions": true | ||
}, | ||
|
||
"rules": { | ||
|
||
"comma-dangle": 0, | ||
"semi": [2, "always"], | ||
"no-console": 0, | ||
"no-unused-vars": [1, {"vars": "all", "args": "none"}], | ||
"no-dupe-keys": 2, | ||
"no-dupe-args": 2, | ||
"radix": 1, | ||
|
||
"camelcase": 1, | ||
"one-var": [1, { | ||
"uninitialized": "always", | ||
"initialized": "never" | ||
}], | ||
"indent": [2, "tab", {"SwitchCase": 1}], | ||
"strict": 0, | ||
"react/display-name": 0, | ||
"react/jsx-no-undef": 2, | ||
"react/jsx-sort-props": 0, | ||
"react/jsx-uses-react": 2, | ||
"react/jsx-uses-vars": 2, | ||
"react/no-did-update-set-state": 2, | ||
"react/no-direct-mutation-state": 2, | ||
"react/no-multi-comp": 0, | ||
"react/no-unknown-property": 2, | ||
"react/react-in-jsx-scope": 2, | ||
"react/self-closing-comp": 2, | ||
"react/wrap-multilines": 2, | ||
"react/jsx-no-duplicate-props": 2 | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,82 @@ | ||
# react-owl-carousel | ||
[React](http://facebook.github.io/react/) + [Owl Carousel](http://owlgraphic.com/owlcarousel/) | ||
[React](http://facebook.github.io/react/) + [Owl Carousel 1.3](http://owlgraphic.com/owlcarousel/) | ||
|
||
## examples | ||
```bash | ||
gulp | ||
### 1.Getting Started | ||
##### You need to load jQuery(1.7+) manually | ||
|
||
```html | ||
<!-- Load jQuery(1.7+) --> | ||
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | ||
|
||
<!-- Customized Style --> | ||
<link rel="stylesheet" href="owl-carousel/owl.theme.css"> | ||
``` | ||
|
||
****** | ||
```jsx | ||
import React from 'react'; | ||
import OwlCarousel from 'react-owl-carousel'; | ||
``` | ||
|
||
## build | ||
```bash | ||
npm run build | ||
### 2.Set up your javascript | ||
wrap your divs inside the OwlCarousel component | ||
|
||
```jsx | ||
<OwlCarousel slideSpeed={300} navigation singleItem autoPlay > | ||
<div className="item"><img src="/img/fullimage1.jpg" alt="The Last of us"/></div> | ||
<div className="item"><img src="/img/fullimage2.jpg" alt="GTA V"/></div> | ||
<div className="item"><img src="/img/fullimage3.jpg" alt="Mirror Edge"/></div> | ||
</OwlCarousel> | ||
``` | ||
**Delete the Hot Module Replacement part at the bottom of lib/ReactOwlCarousel.js, | ||
which is automatically generated by webpack style-loader and it will be evaluated by browserify.** | ||
|
||
|
||
## OwlCarousel Props (Options of owl-carousel) | ||
|
||
[docs] (http://owlgraphic.com/owlcarousel/demos/one.html) | ||
|
||
| Name | Type | Descrption | | ||
|:----------:|:-------------:|:------| | ||
| items | number | This variable allows you to set the maximum amount of items displayed at a time with the widest browser width | | ||
| itemsDesktop | array | This allows you to preset the number of slides visible with a particular browser width. The format is [x,y] whereby x=browser width and y=number of slides displayed. <br />For example [1199,4] means that if(window<=1199){show 4 slides per page} Alternatively use itemsDesktop: false to override these settings. | | ||
| itemsDesktopSmall | array | As above | | ||
| itemsTablet | array | As above | | ||
| itemsTabletSmall | array | As above | | ||
| itemsMobile | array | As above | | ||
| itemsCustom | array | array. This allow you to add custom variations of items depending from the width. If this option is set, itemsDeskop, itemsDesktopSmall, itemsTablet, itemsMobile etc. are disabled. For better preview, order the arrays by screen size, but it's not mandatory. Don't forget to include the lowest available screen size, otherwise it will take the default one for screens lower than lowest available. <br />Example: [[0, 2], [400, 4], [700, 6], [1000, 8], [1200, 10], [1600, 16]] | | ||
| singleItem | boolean | | | ||
| itemsScaleUp | boolean | Option to not stretch items when it is less than the supplied items | | ||
| slideSpeed | number | Slide speed in milliseconds. | | ||
| paginationSpeed | number | Pagination speed in milliseconds. | | ||
| rewindNav | boolean | Slide to first item. Use rewindSpeed to change animation speed. | | ||
| rewindSpeed | number | Rewind speed in milliseconds. | | ||
| autoPlay | boolean / number | Change to any integrer for example autoPlay : 5000 to play every 5 seconds. <br />If you set autoPlay: true default speed will be 5 seconds. | | ||
| stopOnHover | boolean | Stop autoplay on mouse hover | | ||
| navigation | boolean | Display "next" and "prev" buttons. | | ||
| navigationText | [array of element] / boolean | You can customize your own navigation. <br />To get empty buttons use navigationText : false. Also HTML can be used here. | | ||
| scrollPerPage | boolean | Scroll per page not per item. This affect next/prev buttons and mouse/touch dragging. | | ||
| pagination | boolean | Show pagination. | | ||
| paginationNumbers | boolean | Show numbers inside pagination buttons. | | ||
| responsive | boolean | Change that to "false" to disable resposive capabilities | | ||
| responsiveRefreshRate | number | Check window width changes every 200ms for responsive actions | | ||
| responsiveBaseWidth | jQuery selector | Owl Carousel check window for browser width changes. | | ||
| baseClass | string | Automaticly added class for base CSS styles. | | ||
| theme | string | Default Owl CSS styles for navigation and buttons. Change it to match your own theme. | | ||
| lazyLoad | boolean | Delays loading of images. Images outside of viewport won't be loaded before user scrolls to them. Great for mobile devices to speed up page loadings. IMG need special markup class="lazyOwl" and data-src="your img path". | | ||
| lazyFollow | boolean | When pagination used, it skips loading the images from pages that got skipped. It only loads the images that get displayed in viewport. If set to false, all images get loaded when pagination used. It is a sub setting of the lazy load function. | | ||
| lazyEffect | boolean / one of 'fade', 'backSlide', 'goDown', 'scaleUp' | Default is fadeIn on 400ms speed. Use false to remove that effect. | | ||
| autoHeight | boolean | Add height to owl-wrapper-outer so you can use diffrent heights on slides. Use it only for one item per page setting. | | ||
| jsonPath | string | Allows you to load directly from a JSON file. The JSON structure you use needs to match the owl JSON structure used here. To use custom JSON structure see jsonSuccess option. | | ||
| jsonSuccess | function | Success callback for $.getJSON build in into carousel. | | ||
| dragBeforeAnimFinish | boolean | Ignore whether a transition is done or not (only dragging).| | ||
| mouseDrag | boolean | Turn off/on mouse events. | | ||
| touchDrag | boolean | Turn off/on touch events. | | ||
| addClassActive | boolean | Add "active" classes on visible items. Works with any numbers of items on screen. | | ||
| transitionStyle | string | Add CSS3 transition style. Works only with one item on screen. | | ||
|
||
|
||
## OwlCarousel Method | ||
* next () | ||
* prev () | ||
* goTo (page) | ||
* jumpTo (page) | ||
* play () | ||
* stop () |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.