Skip to content

danhuang1202/OwlCarousel2

 
 

Repository files navigation

Owl Carousel 2 Beta

Touch enabled jQuery plugin that lets you createbeautiful responsive carousel slider. To get started, check out http://owlcarousel.owlgraphic.com.

Please consider that the project is still in beta. The current status of the milestones can be found here. If you want to use the latest development see building.

Quick start

Download the latest release and put the required stylesheet at the top of your markup:

<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" />

Put the script at the bottom of your markup right after jQuery:

<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>

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:

<div class="owl-carousel">
  <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>

Call the plugin function and your carousel is ready.

$(document).ready(function(){
  $('.owl-carousel').owlCarousel();
});

Documentation

The documentation, included in this repo in the root directory, is built with Assemble and publicly available at http://owlcarousel.owlgraphic.com. The documentation may also be run locally.

Building

This package comes with Grunt and Bower. 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 and QUnit tests headlessly in PhantomJS.

To define which plugins are build into the distribution just edit /_config.json to fit your needs.

Contributing

The issue tracker is the preferred channel for bug reports, features requests and submitting pull requests.

Please do not use the issue tracker for personal support requests. Stack Overflow (owl-carousel) is a better place to get help.

Bug reports

A bug is a demonstrable problem that is caused by the code in the repository. Good bug reports are extremely helpful, so thanks!

Guidelines for bug reports:

  1. Use the GitHub issue search — check if the issue has already been reported.

  2. Check if the issue has been fixed — try to reproduce it using the latest develop branch in the repository.

  3. Isolate the problem — ideally create a reduced test case and a live example. This JSFiddle and this JS Bin are helpful templates you can fork or clone.

Example:

Short and descriptive example bug report title

A summary of the issue and the browser/OS environment in which it occurs. If suitable, include the steps required to reproduce the bug.

  1. This is the first step
  2. This is the second step
  3. Further steps, etc.

<url> - a link to the reduced test case

Any other information you want to share that is relevant to the issue being reported. This might include the lines of code that you have identified as causing the bug, and potential solutions (and your opinions on their merits).

Feature requests

Feature requests are welcome. But take a moment to find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Please provide as much detail and context as possible.

Pull requests

Good pull requests are a fantastic help. They should remain focused in scope and avoid containing unrelated commits.

Please ask first before embarking on any significant pull request (e.g. implementing features, refactoring code, porting to a different language), otherwise you risk spending a lot of time working on something that the project's developers might not want to merge into the project.

Adhering to the following process is the best way to get your work included in the project:

  1. Fork the project, clone your fork, and configure the remotes:
```bash
git clone https://github.com/<your-username>/OwlCarousel2.git
cd OwlCarousel2
git remote add upstream https://github.com/OwlFonk/OwlCarousel2.git
```
  1. If you cloned a while ago, get the latest changes from upstream:
```bash
git checkout develop
git pull [--rebase] upstream develop
```
  1. Create a new topic branch (off the main project develop branch) to contain your feature, change, or fix:
```bash
git checkout -b <topic-branch-name>
```
  1. Build the distribution before committing to ensure your changes follow the coding standards and all build files are up to date.
```bash
grunt dist
```
  1. Commit your changes in logical chunks. Please adhere to these guidelines. Use Git's interactive rebase feature to tidy up your commits before making them public.

  2. Locally merge (or rebase) the upstream development branch into your topic branch:

```bash
git pull [--rebase] upstream develop
```
  1. Push your topic branch up to your fork:
```bash
git push origin <topic-branch-name>
```
  1. Open a Pull Request with a clear title and description against the develop branch.

By submitting a patch, you agree to allow the project owner to license your work under the terms of the MIT License.

License

The code and the documentation are released under the MIT License.

About

jQuery Responsive Carousel.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 56.4%
  • CSS 43.6%