如何在 Owl 轮播中添加动态元素？

Question

当我使用 vanilla JavaScript 添加动态数据时 Owl-carousel 出现问题，它在 .owl-carousel 侧呈现但不工作。

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 class="card">
        <div class="card-img">
          <img src="${image}" class="img-fluuid" alt="project image">
        </div>
        <div class="card-content">
          <div class="indicator">
            <i class="fa-solid fa-grip-lines"></i>
          </div>
          <h3 class="title">${title}</h3>
          <p class="desc">${desc}</p>
          <div class="links">
            <a href="${github}" class="link" target="_blank">
              <i class="fa-brands fa-github"></i>
              Github
            </a>
            <a href="${preview}" class="link" target="_blank">
              <i class="fa-solid fa-eye"></i>
              Preview
            </a>
          </div>
        </div>
    </div>`;
  });
   project = project.join("");
   carouselDOM.innerHTML = project;
 }

 moreProj(moreProjects);

我需要它在此处呈现：

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

有没有办法解决这个问题？谢谢你的时间。

这是代码的输出。

这是我想要的输出。

Answer 1

这是您编辑过的代码：

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

    function moreProj(projects) {
        let project = projects.map((project) => {
            const { image, title, desc, github, preview } = project;
            return `
                <div class="card">
                    <div class="card-img">
                    <img src="${image}" class="img-fluuid" alt="project image">
                    </div>
                    <div class="card-content">
                    <div class="indicator">
                        <i class="fa-solid fa-grip-lines"></i>
                    </div>
                    <h3 class="title">${title}</h3>
                    <p class="desc">${desc}</p>
                    <div class="links">
                        <a href="${github}" class="link" target="_blank">
                        <i class="fa-brands fa-github"></i>
                        Github
                        </a>
                        <a href="${preview}" class="link" target="_blank">
                        <i class="fa-solid fa-eye"></i>
                        Preview
                        </a>
                    </div>
                    </div>
                </div>
            `;
            
        });
        
        project = project.join("");
        carouselDOM.innerHTML = project;            
    }

Answer 2

2 我想在您的代码中提及的更改：

使用 ID 选择器而不是 class 选择器来查找 DOM 节点。
仅更新 DOM 一次。更改 map 内的 innerHTML 效率不高，因为您会触发多个 reflow。我们可以通过更新 map 之后的 innerHTML 在一个 reflow 中完成。 Reflow 操作使用 CPU 并且比 repaint 操作更昂贵。如果项目数组非常大，这可能是个问题。

function moreProj(projects) {
  let project = projects.map((project) => {
    const {
      image,
      title,
      desc,
      github,
      preview
    } = project;
    return `
      <div class="card">
        <div class="card-img">
          <img src="${image}" class="img-fluuid" alt="project image">
        </div>
        <div class="card-content">
          <div class="indicator">
            <i class="fa-solid fa-grip-lines"></i>
          </div>
          <h3 class="title">${title}</h3>
          <p class="desc">${desc}</p>
          <div class="links">
            <a href="${github}" class="link" target="_blank">
              <i class="fa-brands fa-github"></i>
              Github
            </a>
            <a href="${preview}" class="link" target="_blank">
              <i class="fa-solid fa-eye"></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 class="carousel">
  <div id="owl-carousel" class="owl-carousel owl-theme">
    <!-- RENDER ELEMENTS HERE -->
  </div>
</section>

如何在 Owl 轮播中添加动态元素？

How to add dynamic elements in Owl Carousel?

javascript

html

owl-carousel