Adding products to an owl-carousel in an HTML document using JavaScript

When I try to add my products to an owl-carousel using JavaScript, the display is not correct. My HTML code looks like this:

<div class="container mt-5 mb-5"  data-aos-anchor-placement="top-center">
<div class="owl-carousel">
<div class="ml-2 mr-2">
    <div class="card">
      <div class="cs-pic">
        <div class="effect">
        <div class="listProduct">
          <div class="product-action-list d-flex">
              <a  href="product.php" title="View"><span class="fa fa-eye"></span></a>
              <a href="login.php" title="Add to Favorites"><span class="fa fa-heart"></span></a>
              <a href="login.php" title="Email me When the price drops"><span class="fa fa-envelope"></span></a>
          </div>
        </div>
        </div>
        <img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
      </div>
      <div class="card-body">
        <h4 class="card-title text-center">    
          Electrical
        </h4>     
      </div>
    </div>
  </div>
  
  //more card content goes here
  
</div>
</div>

In my JavaScript code, I am appending new product cards dynamically to the existing carousel. However, when I do this, the carousel displays vertically instead of as a proper carousel. This is what my JavaScript code looks like:

sectionCarouselProducts.innerHTML = sectionCarouselProducts.innerHTML + `
<div class="ml-2 mr-2">
<div class="card">
//new card content added dynamically 
</div>
</div>

`

The inner html is being appended to this base HTML structure:

<div class="container mt-5 mb-5"  data-aos-anchor-placement="top-center">
<div class="owl-carousel carousel-products">
  
</div>
</div>

If anyone has any insights on why the owl carousel appears vertical after appending new content, please let me know! Thank you for your help!

javascripthtmlcssbootstrap-4

Answer №1

 let carousel = tns({
    container: '.my-carousel',
    items: 1,
    responsive: {
        640: {
            edgePadding: 20,
            gutter: 20,
            items: 2
        },
        700: {
            gutter: 30
        },
        900: {
            items: 3
        }
    }
});





<!-- begin snippet: js hide: false console: true babel: false -->
<div class="container mt-5 mb-5" data-aos-anchor-placement="top-center">
      <div class="my-carousel">
      <div class="ml-2 mr-2">
          <div class="card">
            <div class="cs-pic">
              <div class="effect">
              <div class="listProduct">
                <div class="product-action-list d-flex">
                    <a href="product.php" title="View"><span class="fa fa-eye"></span></a>
                    <a href="login.php" title="Add to Favorites"><span class="fa fa-heart"></span></a>
                    <a href="login.php" title="Email me When the price drops"><span class="fa fa-envelope"></span></a>
                </div>
              </div>
              </div>
              <img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
            </div>
            <div class="card-body">
              <h4 class="card-title text-center">    
                Electrical
              </h4>     
            </div>
          </div>
        </div>
        <div class="ml-2 mr-2">
        <div class="card">
            <div class="cs-pic">
              <div class="effect">
              <div class="listProduct">
                <div class="product-action-list d-flex">
                    <a href="product.php" title="View"><span class="fa fa-eye"></span></a>
                    <a href="login.php" title="Add to Favorites"><span class="fa fa-heart"></span></a>
                    <a href="login.php" title="Email me When the price drops"><span class="fa fa-envelope"></span></a>
                </div>
              </div>
              </div>
              <img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
            </div>
            <div class="card-body">
              <h4 class="card-title text-center">    
                Electrical
              </h4>     
            </div>
          </div>
        </div>
        <div class="ml-2 mr-2">
        <div class="card">
            <div class="cs-pic">
              <div class="effect">
              <div class="listProduct">
                <div class="product-action-list d-flex">
                    <a href="product.php" title="View"><span class="fa fa-eye"></span></a>
                    <a href="login.php" title="Add to Favorites"><span class="fa fa-heart"></span></a>
                    <a href="login.php" title="Email me When the price drops"><span class="fa fa-envelope"></span></a>
                </div>
              </div>
              </div>
              <img src="imgProducts/guitar1.jpg" alt="Product" class="card-img-top">
            </div>
            <div class="card-body">
              <h4 class="card-title text-center">    
                Electrical
              </h4>     
            </div>
          </div>
        </div>
        
        ...additional cards here...
        
      </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

Here is an example with your setup ... Hope it helps...

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

What is the best method for setting the height of an empty inline block element to match the line height of its container?

By default, inline-block elements adjust their height based on the container's line height only when they have content. However, I've noticed that empty or whitespace-only inline block elements default to a height of 0 (observed in Firefox). Is ...

css

What is a clever way to monitor the completion of a forEach loop using promises?

I'm new to promises and I'm attempting to use them for the first time. After the completion of the forEach loop, I want to call another function for additional processing. However, when using forEach, the function insertIDBEvents is only printed ...

javascriptnode.jsforeachpromise

Adjust for browser zoom within Three.js CSSRenderer

I'm currently developing a project in three.js using the CSSRenderer and the challenge I'm facing is ensuring that it displays correctly even when the browser zoom is not set at 100%. So far, it appears that: There isn't a way to forcibly ...

javascriptcss3dthree.js

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

My intro video animation is facing recording difficulties due to the autoplay policy in Google Chrome. It seems nearly impossible to capture it accurately. If only autoplay could function for an offline HTML file, my issue would be resolved. Unfortunately ...

javascripthtmlcssgoogle-chromemicrosoft-edge

What could be the reason my function is not showing any data?

Using AngularJS in web development $scope.fetchData = function(dateTime) { console.log(dateTime + " fetch"); $http({ method: 'GET', url: 'https://api.example.com/appointments', params: { date ...

javascriptangularjs

What is the best way to assign a value to an option element for ordering purposes?

My select element is being populated with fruits from a database, using the following code: <select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel"> <option *ngFor="let fruit of fruits">{{fruit}}</option> </selec ...

htmlangulartypescript

NodeJS error: Attempted to set headers after they have already been sent to the client

As a beginner, I have encountered an error message stating that the API is trying to set the response more than once. I am aware of the asynchronous nature of Node.js but I am struggling to debug this issue. Any assistance would be greatly appreciated. rou ...

javascriptsqlnode.jsexpress

Issues with vertical repeating in CSS Sprites

Hey there, I'm currently working on implementing css sprites in my web application. The challenge I'm facing is that I have organized the background of my website vertically within a sprite image. Now, one specific portion of the sprite needs to ...

csscss-sprites

Filtering a user list array in JavaScript based on tags using regular expressions

I have a user list array that needs to be filtered by tags. I attempted to filter the array using the filter and match methods with a RegExp for matching the tag, but the results were not as expected. let users=[{id:1,name:'john',tags:' ...

javascriptarraysfilter

Challenges of Using Flexbox in Media Queries

How can I use flex boxes in CSS to ensure that from a min-width of 769px to 1025px, the third figure is displayed on a new line while the first and second figures remain on the top line taking up equal space? <div class="mid-col-section-2"> <figu ...

htmlcssflexbox

Ajax is coming back with a value that is not defined

Currently, I am working on a search function that is responsible for searching a name from the database. When the user clicks "add", the selected item should appear below the search field so that it can be saved in the database. However, I am encountering ...

javascriptphpjqueryajaxzend-framework

Implement an innovative solution to automatically close the navbar component in tailwindcss on

I've been attempting to create a unique tailwind navbar component for React, but I've encountered issues when trying to make it close on scroll for mobile view. I found the initial code on this website. After that, I tried implementing the code ...

htmlcssreactjstailwind-css

What are some techniques for reducing the number of pages in my Carousel?

I need help figuring out how to set a limit of noOfPages for the number of pages per carousel. The functions in my code below don't implement this and I'm unsure how to do it. const itemsPerPage = 6; const [page, setPage] = React.useState(1); ...

javascriptreactjsmaterial-ui

Using a PHP for loop to manage a div control

Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...

phphtmlcss

The OrhographicCamera is having difficulties capturing the entire scene in its render

Recently, I have been working on rendering a scene using three.js and WebGL in an isomorphic manner. In my research, I came across suggestions to use the OrthographicCamera for this purpose. However, upon implementing it, I noticed some strange outcomes. A ...

javascriptthree.js

Collapse all "Read More" buttons simultaneously using Bootstrap

I am attempting to design a segment that contains multiple paragraphs that can be expanded or collapsed individually. How can I achieve this using only pure bootstrap css so that they do not all expand and collapse simultaneously? #summary { font-size: ...

htmlcsstwitter-bootstrapbootstrap-4

Vue.js component unable to validate HTML input patterns

Attempting to create HTML forms with the 'pattern' input attribute has been an interesting challenge for me. When implementing this through Vue.js components, I encountered some strange behavior. Check out this fiddle to see it in action. Vue.co ...

javascripthtmlvue.jsvuejs2vue-component

Attempting to open and display the contents of a text file (.txt) within a modal dialog box upon clicking a button

I am attempting to develop a modal that will appear when the user clicks on a specific button. The goal is for this modal to showcase text retrieved from a separate file stored on the server. My aim is to show this text within a dialog box modal. So far, ...

javascripthtmlcssnode.js

What are the guidelines for incorporating tag names in CSS selectors?

I created a button that when clicked, displays a table containing actors. I have named them as follows: <button class="actors">Show actors</button> <table class="actors">...</div> Next, I want to style and access them in my CSS (a ...

htmlcsscss-selectors

Using Three.js to ensure that child object3d expands within the boundaries of its parent object

In this scenario, I have 2 Object3Ds with one nested inside the other: var obj1 = new THREE.Object3D(); var obj2 = new THREE.Object3D(); obj1.add(obj2); Assuming obj1 is AxB units wide, how can I instruct obj2 to match that size? Essentially, how can I m ...

javascriptthree.js