I am struggling to implement a fullwidth owl carousel slider on my webpage, but I'm facing issues with getting it to function properly.
I suspect there might be a conflict with the current template that I'm using.
Here is the step-by-step process of how I approached adding the carousel:
(After ensuring all necessary owl carousel files are included)
Firstly, I imported all required files:
<!-- Necessary Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="assets/js/jquery-1.9.1.min.js"></script>
<!-- Including js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
Next, I initialized owl carousel in my header section:
<script>
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
</script>
Finally, I inserted the HTML code for the slider:
<!-- Slider Section -->
<div id="owl-example" class="owl-carousel">
<div class="owl-slide"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png"> Slide 1 </div>
<div class="owl-slide"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png"> Slide 2 </div>
<div class="owl-slide"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png"> Slide 3 </div>
</div>
<!-- End of Slider Section -->
Unfortunately, this is the output I'm currently experiencing:
https://i.sstatic.net/0tmL7.png
The intended location for implementing the slider can be found here: URL (shortened URL for SEO purposes)