I have a problem with Owl-carousel when I add dynamic data using vanilla JavaScript it rendered in side .owl-carousel but not working.

const moreProjects = [
{
 image: "./images/huddle-landing.jpg",
 title: "Huddle landing page",
 desc: "The challenge from frontend mentor, this helps me to practice my layout skills.",
 github:"https://github.com/hatwell-jonel/frontendmentor-huddle-landingpage.git",
 preview: "https://hatwell-jonel.github.io/frontendmentor-huddle-landingpage/",
},
{
 image: "./images/loopstudios-landing.jpg",
 title: "Loopstudios landing page",
 desc: "The challenge from frontend mentor, this helps me to practice my knowledge using CSS Grid.",
 github:"https://github.com/hatwell-jonel/frontendmentor-loopstudio.git",
preview: "https://hatwell-jonel.github.io/frontendmentor-loopstudio/",
},
{
 image: "./images/pricingcomponent.jpg",
 title: "Pricing component",
 desc: "The challenge from frontend mentor, this helps me to increase my knowledge on JavaScript and how to style input range.",
 github:"https://github.com/hatwell-jonel/frontendmentor-pricingcomponent.git",
 preview: "https://hatwell-jonel.github.io/frontendmentor-pricingcomponent/",
},
]

const carouselDOM = document.querySelector(".owl-carousel");

function moreProj(projects){
  let project = projects.map( (project) => {
  const {image, title,desc,github, preview} = project;
   return `
      <div >
        <div >
          <img src="${image}"  alt="project image">
        </div>
        <div >
          <div >
            <i ></i>
          </div>
          <h3 >${title}</h3>
          <p >${desc}</p>
          <div >
            <a href="${github}"  target="_blank">
              <i ></i>
              Github
            </a>
            <a href="${preview}"  target="_blank">
              <i ></i>
              Preview
            </a>
          </div>
        </div>
    </div>`;
  });
   project = project.join("");
   carouselDOM.innerHTML = project;
 }

 moreProj(moreProjects);

I need it to render here:

 <section >
    <div >
        <!-- RENDER ELEMENTS HERE -->
    </div>
  </section>

is there a way to solve this problem? Thank you for your time.

This is the output of the code.

this is my desired output.

CodePudding user response：

Here is your Code Edited:

 const carouselDOM = document.querySelector(".owl-carousel");

    function moreProj(projects) {
        let project = projects.map((project) => {
            const { image, title, desc, github, preview } = project;
            return `
                <div >
                    <div >
                    <img src="${image}"  alt="project image">
                    </div>
                    <div >
                    <div >
                        <i ></i>
                    </div>
                    <h3 >${title}</h3>
                    <p >${desc}</p>
                    <div >
                        <a href="${github}"  target="_blank">
                        <i ></i>
                        Github
                        </a>
                        <a href="${preview}"  target="_blank">
                        <i ></i>
                        Preview
                        </a>
                    </div>
                    </div>
                </div>
            `;
            
        });
        
        project = project.join("");
        carouselDOM.innerHTML = project;            
    }

CodePudding user response：

2 Changes I would like to mention in your code :

• Use ID selector instead of class selector to find DOM node.
• Update the DOM only once. Changing the innerHTML inside the map is not efficient as you are triggering multiple reflow. We can do it in only one reflow by updating the innerHTML after the map. Reflow operation uses CPU and is more expensive than repaint operation. This might be an issue if the projects array is very large.

function moreProj(projects) {
  let project = projects.map((project) => {
    const {
      image,
      title,
      desc,
      github,
      preview
    } = project;
    return `
      <div >
        <div >
          <img src="${image}"  alt="project image">
        </div>
        <div >
          <div >
            <i ></i>
          </div>
          <h3 >${title}</h3>
          <p >${desc}</p>
          <div >
            <a href="${github}"  target="_blank">
              <i ></i>
              Github
            </a>
            <a href="${preview}"  target="_blank">
              <i ></i>
              Preview
            </a>
          </div>
        </div>
    </div>
`;

  });

  return project;
}

const moreProjects = [{
    image: "./images/huddle-landing.jpg",
    title: "Huddle landing page",
    desc: "The challenge from frontend mentor, this helps me to practice my layout skills.",
    github: "https://github.com/hatwell-jonel/frontendmentor-huddle-landingpage.git",
    preview: "https://hatwell-jonel.github.io/frontendmentor-huddle-landingpage/",
  },
  {
    image: "./images/loopstudios-landing.jpg",
    title: "Loopstudios landing page",
    desc: "The challenge from frontend mentor, this helps me to practice my knowledge using CSS Grid.",
    github: "https://github.com/hatwell-jonel/frontendmentor-loopstudio.git",
    preview: "https://hatwell-jonel.github.io/frontendmentor-loopstudio/",
  },
  {
    image: "./images/pricingcomponent.jpg",
    title: "Pricing component",
    desc: "The challenge from frontend mentor, this helps me to increase my knowledge on JavaScript and how to style input range.",
    github: "https://github.com/hatwell-jonel/frontendmentor-pricingcomponent.git",
    preview: "https://hatwell-jonel.github.io/frontendmentor-pricingcomponent/",
  },
];

const carouselDOM = document.querySelector("#owl-carousel");
const projects = moreProj(moreProjects);
let template = "";

for (const project of projects) {
  template  = project;
}

// Updating the DOM only once after all projects are processed
carouselDOM.innerHTML = template;

<section >
  <div id="owl-carousel" >
    <!-- RENDER ELEMENTS HERE -->
  </div>
</section>