Server : Apache System : Linux server2.corals.io 4.18.0-348.2.1.el8_5.x86_64 #1 SMP Mon Nov 15 09:17:08 EST 2021 x86_64 User : corals ( 1002) PHP Version : 7.4.33 Disable Function : exec,passthru,shell_exec,system Directory :  /home/corals/vreg/node_modules/owl.carousel/docs_src/templates/pages/docs/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

---
title: Installation
subTitle: Getting Started
nav: docs
description: Owl Carousel Documentation

sort: 2
tags:
- Getting Started
---

{{#markdown }}
## Installation
------

### Include CSS
First, include two CSS files into your HTML head:
```
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
```
> `owl.carousel.css` file is required and should be included before any *.js files.


Second `owl.theme.default.css` file is optional and feel free to edit it. However, it is required if you'd like the default nav controls like dots or next buttons.
Inside the source package you can also find [SCSS](http://sass-lang.com/) files for easy generation of your own themes.


### Include JS

Yep, include jQuery and `owl.carousel.min.js` into the footer.

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

### Set HTML

You don't need any special markup. All you need is to wrap your divs(owl works with any type element a/img/span..) inside the container element `<div class="owl-carousel">`.
Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file. If you want the default nav controls like dots or buttons, you must also include the "owl-theme" class on that same div.

```
<!-- Set up your HTML -->
<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

Now call the Owl initializer function and your carousel is ready.

```
$(document).ready(function(){
  $(".owl-carousel").owlCarousel();
});
```
> See [demos](/OwlCarousel2/demos/demos.html) for customisation and options usage.

### Next Step

####[FAQ](started-faq.html)

{{/markdown }}