Owl Carousel
Owl Carousel is an easy to use, updateable, fast and free responsive carousel slider with editable code structure. It works with the jquery library and is compatible with many common browsers.
They can also be used by using directional arrows, dragging and dropping and automatic looping.
Browsers and Devices Compatible with Owl Carousel
- Google Chrome
- Mozilla Firefox
- Opera
- IE7/8/10/11
- iPad Safari
- iPod4 Safari
- Nexus 7 Chrome
- Galaxy S4
- Nokia 8s Windows8
Owl Carousel Installation
Owl Carousel CSS and Javascript codes must be added to the HTML web page along with Jquery codes.
CSS Codes
Add the following CSS codes inside the <head></head> tags.
<link rel="stylesheet" href="owl.carousel.min.css">
<link rel="stylesheet" href="owl.theme.default.min.css">You can host the CSS codes in the same place as the designed project or call them via https://owlcarousel2.github.io/OwlCarousel2/ by adding the following codes.
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css">Note: Since calling the CSS codes from outside will create a disadvantage in terms of performance, it would be more accurate to call them from the same storage area as the project.
Javascript Codes
Add the Javascript codes that make the Owl Carousel work to the field after the <body></body> tags are closed.
Note: These codes also work when added to any area of the page, but adding <script></script> codes to the bottom of the page will be more advantageous in terms of site speed.
<script src="jquery.min.js"></script>
<script src="owl.carousel.js"></script>You can also call Javascript codes from outside like CSS codes. Or you can keep it in the same file as the designed project. You can call the required Javascript codes for Owl Carousel Slider via https://owlcarousel2.github.io/OwlCarousel2/ with the following usage.
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/vendors/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>Add the following Javascript library to make adjustments such as how many items will appear according to Owl Carousel loop settings, arrow keys and screen sizes.
Note: These codes should be under jquery.min.js and owl.carousel.js codes, otherwise Owl Carousel will not work.
HTML Codes
You can use the simplest version of Owl Carousel (without arrow keys and slide points) with the codes below.
<div class="owl-carousel owl-theme">
<div class="item">
<h2>Slide 1</h2>
</div>
<div class="item">
<h2>Slide 2</h2>
</div>
<div class="item">
<h2>Slide 3</h2>
</div>
<div class="item">
<h2>Slide 4</h2>
</div>
<div class="item">
<h2>Slide 5</h2>
</div>
<div class="item">
<h2>Slide 6</h2>
</div>
<div class="item">
<h2>Slide 7</h2>
</div>
</div>Source:
https://owlcarousel2.github.io/OwlCarousel2/