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.
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.
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>
<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>
Note: These codes should be under jquery.min.js and owl.carousel.js codes, otherwise Owl Carousel will not work.
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>