-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Javascript Owl Carousel containing the main functionalityof the Owl C…
…arousel Plugin
- Loading branch information
Mezut
authored and
Mezut
committed
Apr 17, 2018
1 parent
b86c8b7
commit d933fc5
Showing
13 changed files
with
3,782 additions
and
0 deletions.
There are no files selected for viewing
Binary file not shown.
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,23 @@ | ||
Copyright (c) 2014 Owl | ||
Modified work Copyright 2016-2017 David Deutsch | ||
|
||
Permission is hereby granted, free of charge, to any person | ||
obtaining a copy of this software and associated documentation | ||
files (the "Software"), to deal in the Software without | ||
restriction, including without limitation the rights to use, | ||
copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the | ||
Software is furnished to do so, subject to the following | ||
conditions: | ||
|
||
The above copyright notice and this permission notice shall be | ||
included in all copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | ||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | ||
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | ||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | ||
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | ||
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | ||
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | ||
OTHER DEALINGS IN THE SOFTWARE. |
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,106 @@ | ||
### OwlCarousel2 was recently transferred to a new owner | ||
|
||
Please make sure to check out our [Roadmap Discussion](https://github.com/OwlCarousel2/OwlCarousel2/issues/1756). | ||
|
||
# Owl Carousel 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/.** | ||
|
||
## Quick start | ||
|
||
### Install | ||
|
||
This package can be installed with: | ||
|
||
- [npm](https://www.npmjs.com/package/owl.carousel): `npm install --save owl.carousel` | ||
- [bower](http://bower.io/search/?q=owl.carousel): `bower install --save owl.carousel` | ||
|
||
Or download the [latest release](https://github.com/OwlCarousel2/OwlCarousel2/releases). | ||
|
||
### Load | ||
|
||
#### Webpack | ||
|
||
Load the required stylesheet and JS: | ||
|
||
```js | ||
import 'owl.carousel/dist/assets/owl.carousel.css'; | ||
import $ from 'jquery'; | ||
import 'imports?jQuery=jquery!owl.carousel'; | ||
``` | ||
|
||
#### Static HTML | ||
|
||
Put the required stylesheet at the [top](https://developer.yahoo.com/performance/rules.html#css_top) of your markup: | ||
|
||
```html | ||
<link rel="stylesheet" href="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" /> | ||
``` | ||
|
||
```html | ||
<link rel="stylesheet" href="/bower_components/owl.carousel/dist/assets/owl.carousel.min.css" /> | ||
``` | ||
|
||
**NOTE:** If you want to use the default navigation styles, you will also need to include `owl.theme.default.css`. | ||
|
||
|
||
Put the script at the [bottom](https://developer.yahoo.com/performance/rules.html#js_bottom) of your markup right after jQuery: | ||
|
||
```html | ||
<script src="/node_modules/jquery/dist/jquery.js"></script> | ||
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script> | ||
``` | ||
|
||
```html | ||
<script src="/bower_components/jquery/dist/jquery.js"></script> | ||
<script src="/bower_components/owl.carousel/dist/owl.carousel.min.js"></script> | ||
``` | ||
|
||
### Usage | ||
|
||
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: | ||
|
||
```html | ||
<div class="owl-carousel owl-theme"> | ||
<div> Your Content </div> | ||
<div> Your Content </div> | ||
<div> Your Content </div> | ||
<div> Your Content </div> | ||
<div> Your Content </div> | ||
<div> Your Content </div> | ||
<div> Your Content </div> | ||
</div> | ||
``` | ||
**NOTE:** The `owl-theme` class is optional, but without it, you will need to style navigation features on your own. | ||
|
||
|
||
Call the [plugin](https://learn.jquery.com/plugins/) function and your carousel is ready. | ||
|
||
```javascript | ||
$(document).ready(function(){ | ||
$('.owl-carousel').owlCarousel(); | ||
}); | ||
``` | ||
|
||
## Documentation | ||
|
||
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. | ||
|
||
## Building | ||
|
||
This package comes with [Grunt](http://gruntjs.com/) and [Bower](http://bower.io/). The following tasks are available: | ||
|
||
* `default` compiles the CSS and JS into `/dist` and builds the doc. | ||
* `dist` compiles the CSS and JS into `/dist` only. | ||
* `watch` watches source files and builds them automatically whenever you save. | ||
* `test` runs [JSHint](http://www.jshint.com/) and [QUnit](http://qunitjs.com/) tests headlessly in [PhantomJS](http://phantomjs.org/). | ||
|
||
To define which plugins are build into the distribution just edit `/_config.json` to fit your needs. | ||
|
||
## Contributing | ||
|
||
Please read [CONTRIBUTING.md](CONTRIBUTING.md). | ||
|
||
## License | ||
|
||
The code and the documentation are released under the [MIT License](LICENSE). |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,193 @@ | ||
/** | ||
* Owl Carousel v2.3.0 | ||
* Copyright 2013-2017 David Deutsch | ||
* Licensed under () | ||
*/ | ||
/* | ||
* Owl Carousel - Core | ||
*/ | ||
.owl-carousel { | ||
display: none; | ||
width: 100%; | ||
-webkit-tap-highlight-color: transparent; | ||
/* position relative and z-index fix webkit rendering fonts issue */ | ||
position: relative; | ||
z-index: 1; } | ||
.owl-carousel .owl-stage { | ||
position: relative; | ||
-ms-touch-action: pan-Y; | ||
touch-action: manipulation; | ||
-moz-backface-visibility: hidden; | ||
/* fix firefox animation glitch */ } | ||
.owl-carousel .owl-stage:after { | ||
content: "."; | ||
display: block; | ||
clear: both; | ||
visibility: hidden; | ||
line-height: 0; | ||
height: 0; } | ||
.owl-carousel .owl-stage-outer { | ||
position: relative; | ||
overflow: hidden; | ||
/* fix for flashing background */ | ||
-webkit-transform: translate3d(0px, 0px, 0px); } | ||
.owl-carousel .owl-wrapper, | ||
.owl-carousel .owl-item { | ||
-webkit-backface-visibility: hidden; | ||
-moz-backface-visibility: hidden; | ||
-ms-backface-visibility: hidden; | ||
-webkit-transform: translate3d(0, 0, 0); | ||
-moz-transform: translate3d(0, 0, 0); | ||
-ms-transform: translate3d(0, 0, 0); } | ||
.owl-carousel .owl-item { | ||
position: relative; | ||
min-height: 1px; | ||
float: left; | ||
-webkit-backface-visibility: hidden; | ||
-webkit-tap-highlight-color: transparent; | ||
-webkit-touch-callout: none; } | ||
.owl-carousel .owl-item img { | ||
display: block; | ||
width: 100%; } | ||
.owl-carousel .owl-nav.disabled, | ||
.owl-carousel .owl-dots.disabled { | ||
display: none; } | ||
.owl-carousel .owl-nav .owl-prev, | ||
.owl-carousel .owl-nav .owl-next, | ||
.owl-carousel .owl-dot { | ||
cursor: pointer; | ||
cursor: hand; | ||
-webkit-user-select: none; | ||
-khtml-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
user-select: none; } | ||
.owl-carousel .owl-nav button.owl-prev, | ||
.owl-carousel .owl-nav button.owl-next, | ||
.owl-carousel button.owl-dot { | ||
background: none; | ||
color: inherit; | ||
border: none; | ||
padding: 0 !important; | ||
font: inherit; } | ||
.owl-carousel.owl-loaded { | ||
display: block; } | ||
.owl-carousel.owl-loading { | ||
opacity: 0; | ||
display: block; } | ||
.owl-carousel.owl-hidden { | ||
opacity: 0; } | ||
.owl-carousel.owl-refresh .owl-item { | ||
visibility: hidden; } | ||
.owl-carousel.owl-drag .owl-item { | ||
-ms-touch-action: none; | ||
touch-action: none; | ||
-webkit-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
user-select: none; } | ||
.owl-carousel.owl-grab { | ||
cursor: move; | ||
cursor: grab; } | ||
.owl-carousel.owl-rtl { | ||
direction: rtl; } | ||
.owl-carousel.owl-rtl .owl-item { | ||
float: right; } | ||
|
||
/* No Js */ | ||
.no-js .owl-carousel { | ||
display: block; } | ||
|
||
/* | ||
* Owl Carousel - Animate Plugin | ||
*/ | ||
.owl-carousel .animated { | ||
-webkit-animation-duration: 1000ms; | ||
animation-duration: 1000ms; | ||
-webkit-animation-fill-mode: both; | ||
animation-fill-mode: both; } | ||
|
||
.owl-carousel .owl-animated-in { | ||
z-index: 0; } | ||
|
||
.owl-carousel .owl-animated-out { | ||
z-index: 1; } | ||
|
||
.owl-carousel .fadeOut { | ||
-webkit-animation-name: fadeOut; | ||
animation-name: fadeOut; } | ||
|
||
@-webkit-keyframes fadeOut { | ||
0% { | ||
opacity: 1; } | ||
100% { | ||
opacity: 0; } } | ||
|
||
@keyframes fadeOut { | ||
0% { | ||
opacity: 1; } | ||
100% { | ||
opacity: 0; } } | ||
|
||
/* | ||
* Owl Carousel - Auto Height Plugin | ||
*/ | ||
.owl-height { | ||
transition: height 500ms ease-in-out; } | ||
|
||
/* | ||
* Owl Carousel - Lazy Load Plugin | ||
*/ | ||
.owl-carousel .owl-item .owl-lazy { | ||
opacity: 0; | ||
transition: opacity 400ms ease; } | ||
|
||
.owl-carousel .owl-item img.owl-lazy { | ||
-webkit-transform-style: preserve-3d; | ||
transform-style: preserve-3d; } | ||
|
||
/* | ||
* Owl Carousel - Video Plugin | ||
*/ | ||
.owl-carousel .owl-video-wrapper { | ||
position: relative; | ||
height: 100%; | ||
background: #000; } | ||
|
||
.owl-carousel .owl-video-play-icon { | ||
position: absolute; | ||
height: 80px; | ||
width: 80px; | ||
left: 50%; | ||
top: 50%; | ||
margin-left: -40px; | ||
margin-top: -40px; | ||
background: url("owl.video.play.png") no-repeat; | ||
cursor: pointer; | ||
z-index: 1; | ||
-webkit-backface-visibility: hidden; | ||
transition: -webkit-transform 100ms ease; | ||
transition: transform 100ms ease; } | ||
|
||
.owl-carousel .owl-video-play-icon:hover { | ||
-webkit-transform: scale(1.3, 1.3); | ||
-ms-transform: scale(1.3, 1.3); | ||
transform: scale(1.3, 1.3); } | ||
|
||
.owl-carousel .owl-video-playing .owl-video-tn, | ||
.owl-carousel .owl-video-playing .owl-video-play-icon { | ||
display: none; } | ||
|
||
.owl-carousel .owl-video-tn { | ||
opacity: 0; | ||
height: 100%; | ||
background-position: center center; | ||
background-repeat: no-repeat; | ||
background-size: contain; | ||
transition: opacity 400ms ease; } | ||
|
||
.owl-carousel .owl-video-frame { | ||
position: relative; | ||
z-index: 1; | ||
height: 100%; | ||
width: 100%; } |
Oops, something went wrong.