I am having trouble with Owl Carousel in my code. Can anyone help me figure out what is causing the issue

I'm having trouble getting my owl carousel to display when I try to run it. I've made sure to link the correct stylesheets and scripts, but nothing is showing up on the page.

Even after trying to link the stylesheets from both a local source and directly from the carousel GitHub repository, I'm still not seeing any results.

Could there be some code in the head section that is preventing the carousel from executing?

<!DOCTYPE html>
<html lang="en" style="height: 300px;">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>Blank Template for Bootstrap</title>
        <!-- Bootstrap core CSS -->
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles for this template -->
        <link rel="stylesheet" href="blocks.css">
        <link href="style.css" rel="stylesheet">
        <script>/* Pinegrow Interactions, do not remove */ (function(){try{if(!document.documentElement.hasAttribute('data-pg-ia-disabled')) { window.pgia_small_mq=typeof pgia_small_mq=='string'?pgia_small_mq:'(max-width:767px)';window.pgia_large_mq=typeof pgia_large_mq=='string'?pgia_large_mq:'(min-width:768px)';var style = document.createElement('style');var pgcss='html:not(.pg-ia-no-preview) [data-pg-ia-hide=""] {opacity:0;visibility:hidden;}html:not(.pg-ia-no-preview) [data-pg-ia-show=""] {opacity:1;visibility:visible;display:block;}';if(document.documentElement.hasAttribute('data-pg-id') && document.documentElement.hasAttribute('data-pg-mobile')) {pgia_small_mq='(min-width:0)';pgia_large_mq='(min-width:99999px)'} pgcss+='...
        <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"> 
    </head>
    <body>
        <div class="container">
</div>
        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light"> 
            <div class="container-fluid"> 
                <a class="navbar-brand" href="#">Navbar</a> 
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler11" aria-controls="" aria-expanded="false" aria-label="Toggle navigation"> 
                    <span class="navbar-toggler-icon"></span> 
                </button>                 
                <div class="collapse navbar-collapse" id="navbarToggler11"> 
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0"> 
                        <li class="nav-item"> 
                            <a class="nav-link active" href="#">Home</a> 
                        </li>                         
                        <li class="nav-item"> 
                            <a class="nav-link" href="#">Link</a> 
                        </li>                         
                        <li class="nav-item"> 
                            <a class="nav-link disabled" href="#">Disabled</a> 
                        </li>                         
                        <li class="nav-item dropdown"> 
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink12" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">                                        Dropdown link                                    </a> 
                            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink12"> 
                                <a class="dropdown-item" href="#">Action</a> 
                                <a class="dropdown-item" href="#">Another action</a> 
                                <a class="dropdown-item" href="#">Something else here</a> 
                            </div>                             
                        </li>                         
                    </ul>                     
                    <form class="d-flex"> 
</form>                     
                </div>                 
            </div>             
        </nav>
        <div class="owl-carousel owl-theme"> 
            <div>
                <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
            </div>             
            <div>
                <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
            </div>             
            <div>
                <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
            </div>             
            <div>
                <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
            </div>             
        </div>
        <section style="height: 400px; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url('Downloads/jeriden-villegas-VLPUm5wP5Z0-unsplash%20(1).jpg');" data-pg-ia-scene='{"l":[{"a":"pxBckElement"}]}'>
            <section style="height: 400px; background-attachment: fixed; background-position...
        </section>
        <script src="assets/js/popper.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
        <script src="pgia/lib/pgia.js"></script>
    </body>
</html>
javascripthtmljquerycss

Answer №1

You've got the stylesheets and scripts in place, but there's one missing piece: a script to kick off the carousel with its specific settings. I've included the necessary script and some screenshots for reference. Everything should be up and running smoothly now: https://i.sstatic.net/sPYNJ.png

https://i.sstatic.net/SmaL5.png Make sure to insert the following script after all other scripts in your code: 

<script> $('.owl-carousel').owlCarousel({ loop:true, margin:10, responsiveClass:true, responsive:{ 0:{ items:1, nav:true }, 600:{ items:3, nav:false }, 1000:{ items:5, nav:true, loop:false } } }) </script>

If you have any more questions or need assistance, feel free to reach out.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Combining Django and chartjs to create stacked multiple charts

Hey there! I'm working on a Django application and using Chart.js to create bar charts. I encountered an issue where, after generating a new chart with a button click, the old one still lingers behind when hovering over the new chart. I have a suspici ...

javascripthtmldjango-templateschart.js

How can I locate a single hidden field within a div containing multiple fields?

Within one div, I have three hidden fields. How can I access and retrieve just one of these hidden fields when referencing this specific div? ...

javascriptjquery

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

I have a specific div element identified by the id #id1 that contains clickable links. Upon clicking on these links, an AJAX call is made to retrieve additional links from the server. My current approach involves replacing the existing links within #id1 w ...

javascriptjqueryhtmlajax

Receiving communication without the need for port forwarding

My goal is to establish a system where a server can send messages to clients at any given time, ensuring that when a message is sent, it is received almost immediately (ideally within 1 second or less). I am looking for a way to achieve this without having ...

javascriptnode.jsnetwork-programming

Utilizing Angular controllers to access data attribute values from child elements

Today I embarked on the journey of learning AngularJs through online tutorials. Excited about my new project, I started working on creating some useful features using Angular. Here is a snippet of my progress so far: The HTML Part <div data-ng-control ...

javascripthtmlangularjs

Create dropdown options from JSON data

I'm attempting to populate a dropdown menu using a JSON response retrieved from an API. let dropdown = $('#LA_picker'); dropdown.empty(); dropdown.append('<option selected="true" disabled>Choose State/Province</option>& ...

jqueryajaxbootstrap-4bootstrap-selectpicker

Issue with AngularJS: Unable to add a new property to an object

Here is the Javascript code I am working with in an AngularJS controller: $scope.schedule = {} $scope.selectEquipment = function(equip) { //alert(equip); $scope.schedule.equipment = equip; } I am successfully receiving the equip variable, but fo ...

javascriptangularjs

Browser Fails to Recognize AJAX Links as Visited

It appears that the styles for a:visited do not apply to links that are loaded via JavaScript. When a user clicks on a standard link, it shows as visited right away and even after refreshing the page. I'm uncertain if this issue is specific to jQuery ...

jquerycssajaxjquery-mobilebrowser-history

Verify if there is a date present within the JSON entity

I have a PHP array containing date strings and I want to validate them using a native HTML5 date input element. To achieve this, I have converted the date array into a JSON object for use with JavaScript: <script> var date_array = <?php echo json ...

javascriptjsonhtmldateobject

Hide series in JQPlot by simply clicking on its legend name, while ensuring that the tooltip is always visible

Currently, I am utilizing JQPlot along with the legend plugin to allow for toggling the display of series by clicking on their legend names. legend: { show: true, placement: 'outsideGrid', renderer: $.jqplot.EnhancedL ...

jquerygraphjqplot

I rely on the angular-responsive-carousel library for my project, but unfortunately, I am unable to customize the arrow and dots

When it comes to CSS, I utilize ng deep style in Angular 10 to make changes for browser CSS. However, I am facing an issue where the problem is not being resolved by my CSS code. Here is a snippet of my code: > ::ngdeep .carousel-arrow { > b ...

csstypescriptsasscarouselangular10

Tips for aligning sections of a navigation bar in different directions: left and right

I'm attempting to float a logo to the left side of a nav bar and have the text float to the right of the nav bar using Bootstrap. I've tried adding float and text align classes to outer divs and specific elements but haven't had success yet. ...

htmlbootstrap-4

What is the best way to dynamically add a class to the right navigation element in Vue.js when the :class binding only accepts boolean values?

My issue involves implementing a fixed navigation bar with the following structure: <nav class='navigation'> <div :class="{ active: }" @click='scrollTo(".test1")'></div> <div :class=" ...

javascriptvue.js

Text Parallax Effect

For my website, I am interested in incorporating a unique parallax effect. Instead of just fixing a background image and allowing scrolling over it, I want to apply this effect to all of the content on my site. The website consists of a single page with m ...

javascriptjqueryhtmlcssparallax

Having multiple instances of jQuery running concurrently on a single webpage

I am a novice when it comes to jQuery and I'm facing some issues with it. I have a basic slideshow and a weather plugin that I would like to incorporate, but strangely they both seem to malfunction when used together. <script src="js/jquery.js"> ...

javascriptjquerypluginsslideshowweather

A stylish Bootstrap list group featuring large Font Awesome icons

I am working with a Bootstrap 5 List Group element on my webpage. To enhance its visual appeal, I want to include oversized Font Awesome icons. After some styling and using a span tag, I managed to add the icon successfully. However, the issue I am facing ...

csstwitter-bootstrapbootstrap-5

What could be causing the issue of my CSS file not properly linking in my HTML file?

Recently, I created an HTML file that contains the following code... <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-sca ...

htmlcss

Several different forms are present on a single page, and the goal is to submit all of the data at

Looking for assistance with combining Twitter and Google data entry at once. Here's the code I've developed: Please guide me on how to submit Twitter and Google details together. <html> <head> <script type="text/javascript">< ...

javascripthtmlforms

Exploring the best practices for utilizing the error prop and CSS with the Input API in Material UI while utilizing context

When working with the MUI Input API props and CSS, I encountered an issue related to the {error} and its use. This is how my code looks: const [value, setValue] = useState<string>(cell.value); const [startAdornment, setStartAdornment] = useState< ...

htmlreactjstypescriptmaterial-ui

What is the preset value for the payload in a vuex action?

Currently, I am utilizing an if-else statement in my Vuex action to set a default value for a payload property. Specifically, I check if the passed payload object contains a delay property; if it does not, I assign it a default value and handle appropriate ...

javascriptvue.js