I've been exploring the idea of adding a carousel to my website and stumbled upon owl.carousel.js during my research. The layout and features seem to align with what I'm looking for, which is great!
As a newbie in this field, I could use some guidance. :)
My main question is, once I've downloaded the file and added the necessary links to my HTML code, how do I actually get it up and running? I'm unsure whether I should include the JS directly in the HTML or keep it separate as I currently have it structured. According to the Owl Carousel documentation, it simply mentions calling the function.
$(document).ready(function(){
$(".owl-carousel").owlCarousel();
});<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<a link href="main.css" rel="stylsheet" type="text/css">
<link rel="stylesheet" href="owlcarousel/owl.carousel.min.css">
<link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css">
<title></title>
</head>
<body>
<div class="owl-carousel">
<div> <img src="images/images-1.jpeg"> </div>
<div> <img src="images/images-2.jpeg"> </div>
<div> <img src="images/images-3.jpeg"> </div>
<div> <img src="images/images.jpeg"> </div>
<div> <img src="images/shutterstock_204805573.jpg"> </div>
<div> <img src="images/shutterstock_221107753.jpg"> </div>
<div> <img src="images/smug%20mug%20portrait%20copy.jpg"> </div>
</div>
<script src="jquery.min.js"></script>
<script src="owlcarousel/owl.carousel.min.js"></script>
</body>
</html>